diff --git a/examples/kendo-react-freemium/src/App.tsx b/examples/kendo-react-freemium/src/App.tsx index 799badde..edd41298 100644 --- a/examples/kendo-react-freemium/src/App.tsx +++ b/examples/kendo-react-freemium/src/App.tsx @@ -7,6 +7,7 @@ import Projects from "./pages/Projects"; import Tasks from "./pages/Tasks"; import Settings from "./pages/Settings"; import Team from "./pages/Team"; +import Task from "./pages/Task"; export default function App() { return ( @@ -18,6 +19,7 @@ export default function App() { } /> } /> } /> + } /> } /> } /> } /> diff --git a/examples/kendo-react-freemium/src/pages/Task.tsx b/examples/kendo-react-freemium/src/pages/Task.tsx new file mode 100644 index 00000000..929570ea --- /dev/null +++ b/examples/kendo-react-freemium/src/pages/Task.tsx @@ -0,0 +1,139 @@ +import { useParams } from "react-router"; +import { useNavigate } from "react-router-dom"; +import { tasksData, teamsData } from "./data"; +import { ButtonGroup, Button, FloatingActionButton } from "@progress/kendo-react-buttons"; +import { Breadcrumb, Card, CardBody, Avatar, CardTitle, CardSubtitle, CardFooter, BreadcrumbLinkMouseEvent, GridLayout } from "@progress/kendo-react-layout"; +import { groupIcon, listUnorderedSquareIcon, homeIcon, detailSectionIcon, plusIcon, folderIcon, trashIcon, checkIcon } from "@progress/kendo-svg-icons"; +import { SvgIcon } from "@progress/kendo-react-common"; +import { Window } from '@progress/kendo-react-dialogs'; +import React from "react"; +import { TextArea } from "@progress/kendo-react-inputs"; + +interface DataModel { + id: string; + text?: string; + icon?: React.ReactNode; +} + +export default function Task() { + let params = useParams(); + const navigate = useNavigate(); + const task = tasksData.filter(task => task.taskId === params.taskId)[0]; + + const breadcrumbItems: DataModel[] = [ + { + id: "home", + icon: , + }, + { + id: "tasks", + text: "Tasks", + }, + { + id: `${params.taskId}`, + text: `${tasksData.filter(task => task.taskId === params.taskId)[0].taskName}`, + } + ]; + + const handleItemSelect = (e: BreadcrumbLinkMouseEvent) => { + if (e.id === 'home') { + navigate('/'); + } else if (e.id === 'tasks') { + navigate('/tasks'); + } + } + + return ( + <> +
+ + +

{tasksData.map(task => { return task.taskId === params.taskId ? task.taskName : '' })}

+ +
+
+