system-praktyk-front/src/pages/base.tsx
2021-01-09 22:47:39 +01:00

34 lines
1.2 KiB
TypeScript

import React, { HTMLProps, useEffect } from "react";
import classNames from "classnames"
import { Box, BoxProps, Breadcrumbs, BreadcrumbsProps, Container, Typography } from "@material-ui/core";
import "@/styles/page.scss"
export type PageProps = {
title?: string;
} & BoxProps;
export type PageHeaderProps = {
maxWidth?: "sm" | "md" | "lg" | "xl" | false
} & HTMLProps<HTMLDivElement>
export const Page = ({ title, children, ...props }: PageProps) => {
useEffect(() => {
document.title = title ? title + " | Praktyka Studencka" : "Praktyka Studencka";
}, [ title ])
return <Box {...props} className={ classNames("page", props.className) } component="main">
{ children }
</Box>
}
Page.Header = ({ children, maxWidth = undefined, ...props }: PageHeaderProps) =>
<section {...props} className={classNames("page__header", props.className)}>
<Container maxWidth={ maxWidth }>
{ children }
</Container>
</section>
Page.Title = ({ children }: HTMLProps<any>) => <Typography variant="h2" className="page__title">{ children }</Typography>
Page.Breadcrumbs = ({ children, ...props }: BreadcrumbsProps) => <Breadcrumbs { ...props}>{ children }</Breadcrumbs>