system-praktyk-front/src/management/main.tsx

63 lines
2.6 KiB
TypeScript

import { BreadcrumbsProps, Container, Link, List, ListItem, ListItemIcon, ListItemText, Paper } from "@material-ui/core";
import { Page } from "@/pages/base";
import React from "react";
import { Link as RouterLink } from "react-router-dom";
import { route } from "@/routing";
import { useTranslation } from "react-i18next";
import { CalendarClock, FileCertificateOutline, FileDocumentMultipleOutline, FormatPageBreak, TableOfContents } from "mdi-material-ui";
export const ManagementLink = ({ icon, route, children }: ManagementLinkProps) =>
<ListItem button component={ RouterLink } to={ route }>
<ListItemIcon>{ icon }</ListItemIcon>
<ListItemText>{ children }</ListItemText>
</ListItem>
export const Management = {
Breadcrumbs: ({ children, ...props }: BreadcrumbsProps) => {
const { t } = useTranslation();
return <Page.Breadcrumbs { ...props }>
<Link component={ RouterLink } to={ route("management:index") }>{ t("management:title") }</Link>
{ children }
</Page.Breadcrumbs>;
},
Menu: List,
MenuItem: ManagementLink,
}
type ManagementLinkProps = React.PropsWithChildren<{
icon: JSX.Element,
route: string,
}>;
export const ManagementIndex = () => {
const { t } = useTranslation();
return <Page>
<Page.Header>
<Page.Title>{ t("management:title") }</Page.Title>
</Page.Header>
<Container>
<Paper elevation={ 2 }>
<Management.Menu>
<ManagementLink icon={ <TableOfContents /> } route={ route("management:courses") }>
{ t("management:course.index.title") }
</ManagementLink>
<ManagementLink icon={ <CalendarClock /> } route={ route("management:editions") }>
{ t("management:edition.index.title") }
</ManagementLink>
<ManagementLink icon={ <FileCertificateOutline /> } route={ route("management:types") }>
{ t("management:type.index.title") }
</ManagementLink>
<ManagementLink icon={ <FormatPageBreak/> } route={ route("management:report_fields") }>
{ t("management:report-fields.title") }
</ManagementLink>
<ManagementLink icon={ <FileDocumentMultipleOutline /> } route={ route("management:static_pages") }>
{ t("management:page.index.title") }
</ManagementLink>
</Management.Menu>
</Paper>
</Container>
</Page>
}