speice.io/posts/LayoutBlog.tsx

45 lines
974 B
TypeScript

import { PropsWithChildren } from "react";
import { IconContext } from "react-icons";
import { FaCalendar } from "react-icons/fa";
import Base from "../pages/LayoutBase";
interface BlogProps {
title: string;
description: string;
published: string;
updated?: string;
}
export default function Layout({
title,
description,
published,
updated,
}: BlogProps): React.FC<PropsWithChildren> {
const header = (
<div className="header">
<h1>{title}</h1>
<h3>{description}</h3>
<h4>
<FaCalendar />
{published}
</h4>
{updated && <p>Last updated: {updated}</p>}
</div>
);
const withChildren: React.FC<PropsWithChildren> = ({ children }) => (
<Base>
<IconContext.Provider
value={{ className: "icon icon-post", size: "1.2em" }}
>
{header}
<div style={{ paddingTop: "2em" }} />
{children}
</IconContext.Provider>
</Base>
);
return withChildren;
}