50 lines
1.1 KiB
TypeScript
50 lines
1.1 KiB
TypeScript
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
import { faCalendar } from "@fortawesome/free-solid-svg-icons";
|
|
import { MDXProvider } from "@mdx-js/react";
|
|
import React, { PropsWithChildren } from "react";
|
|
|
|
import Base from "../pages/LayoutBase";
|
|
|
|
interface BlogProps {
|
|
title: string;
|
|
description: string;
|
|
published: string;
|
|
updated?: string;
|
|
}
|
|
|
|
const components = {
|
|
pre: (props: any) => <pre className="hljs" {...props} />,
|
|
};
|
|
|
|
export default function Layout({
|
|
title,
|
|
description,
|
|
published,
|
|
updated,
|
|
}: BlogProps): React.FC<PropsWithChildren> {
|
|
const header = (
|
|
<div className="header">
|
|
<h1>{title}</h1>
|
|
<h3>{description}</h3>
|
|
<h4>
|
|
<FontAwesomeIcon
|
|
icon={faCalendar}
|
|
scale={1.2}
|
|
className="icon icon-post"
|
|
/>
|
|
{published}
|
|
</h4>
|
|
{updated && <p>Last updated: {updated}</p>}
|
|
</div>
|
|
);
|
|
|
|
const withChildren: React.FC<PropsWithChildren> = ({ children }) => (
|
|
<Base>
|
|
{header}
|
|
<div style={{ paddingTop: "2em" }} />
|
|
<MDXProvider components={components}>{children}</MDXProvider>
|
|
</Base>
|
|
);
|
|
return withChildren;
|
|
}
|