2022-12-03 17:25:32 +03:00
|
|
|
import {
|
|
|
|
Box,
|
|
|
|
Typography,
|
|
|
|
Container,
|
|
|
|
Link,
|
|
|
|
useTheme,
|
|
|
|
IconButton,
|
|
|
|
} from "@mui/material";
|
2022-11-27 16:16:52 +03:00
|
|
|
import { Image } from "../image";
|
|
|
|
import nixSnowflake from "../../public/nix-snowflake.svg";
|
2022-12-03 19:38:50 +03:00
|
|
|
import nixWhite from "../../public/white.svg";
|
2022-12-03 17:25:32 +03:00
|
|
|
import GitHubIcon from "@mui/icons-material/GitHub";
|
2022-11-26 12:36:08 +03:00
|
|
|
// import Link from "next/link";
|
|
|
|
export interface LayoutProps {
|
|
|
|
children: React.ReactNode;
|
|
|
|
}
|
|
|
|
|
|
|
|
export function Layout(props: LayoutProps) {
|
|
|
|
const { children } = props;
|
2022-11-27 16:16:52 +03:00
|
|
|
const theme = useTheme();
|
2022-11-26 12:36:08 +03:00
|
|
|
|
|
|
|
return (
|
2022-11-27 16:16:52 +03:00
|
|
|
<Box
|
|
|
|
sx={{
|
2022-12-03 19:38:50 +03:00
|
|
|
height: "100vh",
|
|
|
|
overflow: "hidden",
|
2022-11-27 16:16:52 +03:00
|
|
|
bgcolor:
|
|
|
|
theme.palette.mode === "light"
|
|
|
|
? "rgb(242, 248, 253)"
|
|
|
|
: "rgb(23, 17, 22)",
|
|
|
|
}}
|
|
|
|
>
|
2022-12-03 19:38:50 +03:00
|
|
|
<header>
|
2022-11-27 16:16:52 +03:00
|
|
|
<Box
|
|
|
|
sx={{
|
|
|
|
position: "fixed",
|
|
|
|
top: "15rem",
|
|
|
|
height: "100%",
|
|
|
|
width: "100%",
|
|
|
|
zIndex: 0,
|
|
|
|
opacity: 0.1,
|
|
|
|
backgroundImage: `url(${nixSnowflake.src})`,
|
|
|
|
backgroundPositionX: "50%",
|
|
|
|
backgroundRepeat: "no-repeat",
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
|
|
|
|
<Box
|
|
|
|
sx={{
|
2022-12-03 19:38:50 +03:00
|
|
|
position: "fixed",
|
|
|
|
top: 0,
|
|
|
|
width: "100%",
|
|
|
|
p: 1,
|
|
|
|
zIndex: 1,
|
|
|
|
borderBottomRightRadius: 16,
|
|
|
|
borderBottomLeftRadius: 16,
|
2022-11-27 16:16:52 +03:00
|
|
|
backgroundColor:
|
|
|
|
theme.palette.mode === "light"
|
|
|
|
? "primary.main"
|
|
|
|
: "background.paper",
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<Typography
|
2022-12-03 19:38:50 +03:00
|
|
|
variant="h2"
|
2022-11-27 16:16:52 +03:00
|
|
|
sx={{
|
|
|
|
textAlign: "center",
|
|
|
|
color: "#fff",
|
|
|
|
}}
|
|
|
|
>
|
2022-12-03 17:25:32 +03:00
|
|
|
<Box
|
|
|
|
sx={{
|
|
|
|
display: {
|
|
|
|
xs: "none",
|
2022-12-03 19:38:50 +03:00
|
|
|
md: "inline-block",
|
2022-12-03 17:25:32 +03:00
|
|
|
},
|
2022-11-27 16:16:52 +03:00
|
|
|
}}
|
2022-12-03 19:38:50 +03:00
|
|
|
component="span"
|
2022-12-03 17:25:32 +03:00
|
|
|
>
|
|
|
|
<Image
|
2022-12-03 19:38:50 +03:00
|
|
|
src={nixWhite}
|
2022-12-03 17:25:32 +03:00
|
|
|
alt="nix-logo"
|
2022-12-03 19:38:50 +03:00
|
|
|
height={50}
|
2022-12-03 17:25:32 +03:00
|
|
|
style={{
|
2022-12-03 19:38:50 +03:00
|
|
|
marginBottom: "-0.5rem",
|
2022-12-03 17:25:32 +03:00
|
|
|
}}
|
|
|
|
/>
|
|
|
|
</Box>
|
2022-11-27 16:16:52 +03:00
|
|
|
<Box sx={{ ml: 1 }} component="span">{`noog\u03BBe`}</Box>
|
2022-12-03 19:38:50 +03:00
|
|
|
<Link href="https://github.com/hsjobeki/noogle">
|
|
|
|
<IconButton sx={{ float: "right", top: "0.5em", right: "1em" }}>
|
|
|
|
<GitHubIcon
|
|
|
|
fontSize="large"
|
|
|
|
sx={{
|
|
|
|
display: {
|
|
|
|
xs: "none",
|
|
|
|
md: "inline-block",
|
|
|
|
},
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
</IconButton>
|
|
|
|
</Link>
|
2022-11-26 12:36:08 +03:00
|
|
|
</Typography>
|
|
|
|
</Box>
|
|
|
|
</header>
|
2022-12-03 19:38:50 +03:00
|
|
|
<main
|
|
|
|
style={{
|
|
|
|
marginTop: "6em",
|
|
|
|
maxHeight: "calc(100vh - 8em)",
|
|
|
|
overflowY: "scroll",
|
|
|
|
}}
|
|
|
|
>
|
2022-11-26 12:36:08 +03:00
|
|
|
<Container sx={{ pt: 0 }} maxWidth="xl">
|
|
|
|
{children}
|
|
|
|
</Container>
|
|
|
|
</main>
|
|
|
|
<footer
|
|
|
|
style={{
|
|
|
|
position: "fixed",
|
|
|
|
bottom: 0,
|
|
|
|
display: "flex",
|
|
|
|
justifyContent: "center",
|
|
|
|
width: "100%",
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
Powered by{" "}
|
|
|
|
<Link sx={{ ml: 1 }} href="https://oceansprint.org/">
|
|
|
|
{" "}
|
|
|
|
OceanSprint
|
|
|
|
</Link>
|
|
|
|
</footer>
|
2022-11-27 16:16:52 +03:00
|
|
|
</Box>
|
2022-11-26 12:36:08 +03:00
|
|
|
);
|
|
|
|
}
|