67 lines
2.6 KiB
TypeScript
67 lines
2.6 KiB
TypeScript
import Breadcrumbs from "@/components/lib/elements/Breadcrumbs";
|
|
import EmptyContent from "@/components/lib/elements/EmptyContent";
|
|
import Divider from "@/components/lib/layout/Divider";
|
|
import H1 from "@/components/lib/layout/H1";
|
|
import Row from "@/components/lib/layout/Row";
|
|
import Section from "@/components/lib/layout/Section";
|
|
import Span from "@/components/lib/layout/Span";
|
|
import Stack from "@/components/lib/layout/Stack";
|
|
import { useMDXComponents } from "@/components/lib/mdx/mdx-components";
|
|
import { AppContext } from "@/pages/_app";
|
|
import { Clock } from "lucide-react";
|
|
import { MDXRemote } from "next-mdx-remote";
|
|
import React from "react";
|
|
|
|
export default function Main() {
|
|
const { pageProps } = React.useContext(AppContext);
|
|
const { blogPost } = pageProps;
|
|
|
|
const mdxSource = pageProps.mdxSource;
|
|
const { components, codeBgColor } = useMDXComponents();
|
|
|
|
if (!mdxSource) {
|
|
return <EmptyContent title="No Content For this Post" />;
|
|
}
|
|
|
|
return (
|
|
<Section>
|
|
<Stack className="w-full max-w-full xl:max-w-[800px]">
|
|
{/* <Divider dashed className="border-[2px] my-6" /> */}
|
|
<Stack className="gap-1">
|
|
<H1 className="leading-snug mb-1">{blogPost?.title}</H1>
|
|
<Span>{blogPost?.excerpt}</Span>
|
|
<Stack className="gap-2 mt-2">
|
|
<Breadcrumbs
|
|
divider={<span className="opacity-40">/</span>}
|
|
linkProps={{
|
|
className: "!text-white border-none",
|
|
}}
|
|
currentLinkProps={{
|
|
className: " opacity-40 pointer-events-none",
|
|
}}
|
|
backButton
|
|
/>
|
|
<Row className="mt-1">
|
|
<Clock
|
|
size={13}
|
|
opacity={0.5}
|
|
className="-mt-[1px]"
|
|
/>
|
|
<Span size="smaller" variant="faded">
|
|
{blogPost?.date_created?.substring(0, 24)}
|
|
</Span>
|
|
</Row>
|
|
</Stack>
|
|
</Stack>
|
|
<Divider dashed className="border-[2px] my-6" />
|
|
<MDXRemote
|
|
{...mdxSource}
|
|
components={{
|
|
...components,
|
|
}}
|
|
/>
|
|
</Stack>
|
|
</Section>
|
|
);
|
|
}
|