47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
import React, { ReactNode, useMemo } from "react";
|
|
|
|
import AppBar from "@mui/material/AppBar";
|
|
import Box from "@mui/material/Box";
|
|
import Toolbar from "@mui/material/Toolbar";
|
|
import Typography from "@mui/material/Typography";
|
|
import Checkbox from "@mui/material/Checkbox";
|
|
import CssBaseline from "@mui/material/CssBaseline";
|
|
import useMediaQuery from "@mui/material/useMediaQuery";
|
|
import { createTheme, ThemeProvider } from "@mui/material/styles";
|
|
|
|
export type LayoutProps = {
|
|
appBar: ReactNode;
|
|
content: ReactNode;
|
|
title: string;
|
|
};
|
|
|
|
export const Layout: React.FC<LayoutProps> = ({ appBar, content, title }) => {
|
|
const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
|
|
|
|
const theme = useMemo(
|
|
() =>
|
|
createTheme({ palette: { mode: prefersDarkMode ? "dark" : "light" } }),
|
|
[prefersDarkMode]
|
|
);
|
|
|
|
return (
|
|
<ThemeProvider theme={theme}>
|
|
<CssBaseline />
|
|
<Box sx={{ padding: (theme) => theme.spacing(2, 2, 10, 2) }}>
|
|
<Typography variant="h4" sx={{ paddingLeft: 2, marginBottom: 2 }}>
|
|
<Checkbox sx={{ visibility: "hidden" }} />
|
|
{title}
|
|
</Typography>
|
|
{content}
|
|
</Box>
|
|
<AppBar
|
|
position="fixed"
|
|
color="transparent"
|
|
sx={{ top: "auto", bottom: 0 }}
|
|
>
|
|
<Toolbar>{appBar}</Toolbar>
|
|
</AppBar>
|
|
</ThemeProvider>
|
|
);
|
|
};
|