谈谈生活上和工作上

import { MDXRemote } from "next-mdx-remote/rsc";

import breaks from "remark-breaks";

import remarkGfm from "remark-gfm";

import { PostScreen } from "@/components/screen";

import { endpoints } from "@/domain/endpoints";

import {

  TypographyBlockCode,

  TypographyBlockquote,

  TypographyH1,

  TypographyH2,

  TypographyH3,

  TypographyH4,

  TypographyH5,

  TypographyH6,

  TypographyInlineCode,

  TypographyOl,

  TypographyP,

  TypographyTable,

  TypographyUl,

} from "@/components/typography";

export default async function PostPage(props: {

  params: Promise<{ id: string }>;

}) {

  const id = (await props.params).id;

  const post = await endpoints.queryOnePost(id);

  return (

    <PostScreen>

      <article className="p-6 px-20">

        <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight text-balance">

          Taxing Laughter: The Joke Tax Chronicles

        </h1>

        <p className="text-muted-foreground text-xl leading-7 [&:not(:first-child)]:mt-6">

          Once upon a time, in a far-off land, there was a very lazy king who

          spent all day lounging on his throne. One day, his advisors came to

          him with a problem: the kingdom was running out of money.

        </p>

        <MDXRemote

          source={post.content}

          components={{

            h1: TypographyH1,

            h2: TypographyH2,

            h3: TypographyH3,

            h4: TypographyH4,

            h5: TypographyH5,

            h6: TypographyH6,

            p: TypographyP,

            blockquote: TypographyBlockquote,

            table: TypographyTable,

            ul: TypographyUl,

            ol: TypographyOl,

            code: TypographyInlineCode,

            pre: TypographyBlockCode,

          }}

          options={{

            mdxOptions: {

              remarkPlugins: [breaks, remarkGfm],

              format: "mdx",

            },

          }}

        />

      </article>

    </PostScreen>

  );

}