Files
yongyuancv.cn/components/PostLayout.js
2022-04-06 11:42:49 +08:00

48 lines
1.3 KiB
JavaScript

import { Grid, Container, Typography, Paper } from "@mui/material";
import { MDXProvider } from "@mdx-js/react";
import Image from "next/image";
const components = {
h1: (props) => <Typography variant="h1" {...props} />,
h2: (props) => <Typography variant="h2" {...props} />,
h3: (props) => <Typography variant="h3" {...props} />,
h4: (props) => <Typography variant="h4" {...props} />,
h5: (props) => <Typography variant="h5" {...props} />,
h6: (props) => <Typography variant="h6" {...props} />,
code: (props) => (
<code
style={{
backgroundColor: "lightpink",
borderRadius: "0.4rem",
padding: "0.2rem",
}}
{...props}
/>
),
};
export default function PostLayout({ children, meta }) {
return (
<MDXProvider components={components}>
<Container>
<Grid container spacing={3}>
<Grid item xs={12}>
<Paper
style={{
padding: "1rem",
margin: "1rem",
backgroundColor: "#fafafa",
}}
>
<Typography variant="h4">{meta.title}</Typography>
<Typography variant="body1">{meta.description}</Typography>
<hr />
{children}
</Paper>
</Grid>
</Grid>
</Container>
</MDXProvider>
);
}