File size: 1,185 Bytes
9316888 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | import { Link } from 'react-router-dom';
type BlogArticleLayoutProps = {
title: string;
description?: string;
children: React.ReactNode;
};
const BlogArticleLayout = ({
title,
description,
children,
}: BlogArticleLayoutProps) => (
<main className="min-h-screen bg-slate-50 text-slate-900">
<div className="mx-auto max-w-4xl px-6 pt-8">
<Link
to="/blog/"
className="text-sm text-slate-500 underline-offset-4 hover:text-slate-900 hover:underline"
>
Back to blog
</Link>
</div>
<article className="mx-auto max-w-3xl px-6 py-12">
<header className="border-b border-slate-200 pb-10">
<p className="text-xs font-semibold uppercase tracking-[0.28em] text-sky-700">
Blog Article
</p>
<h1 className="mt-4 font-serif text-4xl leading-tight text-slate-950 sm:text-5xl">
{title}
</h1>
{description ? (
<p className="mt-5 max-w-2xl text-lg leading-8 text-slate-600">
{description}
</p>
) : null}
</header>
<div className="mt-10">{children}</div>
</article>
</main>
);
export default BlogArticleLayout;
|