speice.io/posts/LayoutBlog.tsx

50 lines
1.1 KiB
TypeScript
Raw Normal View History

2023-04-21 23:03:34 -04:00
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCalendar } from "@fortawesome/free-solid-svg-icons";
2023-04-23 17:44:49 -04:00
import { MDXProvider } from "@mdx-js/react";
import React, { PropsWithChildren } from "react";
2023-04-16 20:10:40 -04:00
import Base from "../pages/LayoutBase";
interface BlogProps {
title: string;
description: string;
published: string;
updated?: string;
}
2023-04-23 17:44:49 -04:00
const components = {
pre: (props: any) => <pre className="hljs" {...props} />,
};
2023-04-16 20:10:40 -04:00
export default function Layout({
title,
description,
published,
updated,
}: BlogProps): React.FC<PropsWithChildren> {
const header = (
<div className="header">
<h1>{title}</h1>
<h3>{description}</h3>
2023-04-21 21:50:43 -04:00
<h4>
2023-04-21 23:03:34 -04:00
<FontAwesomeIcon
icon={faCalendar}
scale={1.2}
className="icon icon-post"
/>
2023-04-21 21:50:43 -04:00
{published}
</h4>
2023-04-16 20:10:40 -04:00
{updated && <p>Last updated: {updated}</p>}
</div>
);
const withChildren: React.FC<PropsWithChildren> = ({ children }) => (
<Base>
2023-04-21 23:03:34 -04:00
{header}
<div style={{ paddingTop: "2em" }} />
2023-04-23 17:44:49 -04:00
<MDXProvider components={components}>{children}</MDXProvider>
2023-04-16 20:10:40 -04:00
</Base>
);
return withChildren;
}