src/components/mdx-layout.tsx


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
45
46
47
48
49
50
51

import { PostComments } from '@/app/(home)/posts/[slug]/page.client';
import type { TOCItemType } from 'fumadocs-core/server';
import { InlineTOC } from 'fumadocs-ui/components/inline-toc';
import type { ReactNode } from 'react';
import { Section } from './section';

interface MdxLayoutProps {
  children: ReactNode;
  title: string;
  toc?: TOCItemType[] | null;
  comments?: boolean;
  slug: string;
}

export default function MdxLayout({
  children,
  title,
  toc,
  comments,
  slug,
}: MdxLayoutProps): ReactNode {
  return (
    <>
      <Section className='p-4 lg:p-6'>
        <h1 className='text-center font-bold text-3xl leading-tight tracking-tighter md:text-4xl'>
          {title}
        </h1>
      </Section>

      <Section className='h-full' sectionClassName='flex flex-1'>
        <article className='flex min-h-full flex-col lg:flex-row'>
          <div className='flex flex-1 flex-col gap-4'>
            {toc?.length ? (
              <InlineTOC
                items={toc}
                className='rounded-none border-0 border-border/70 border-b border-dashed dark:border-border'
              />
            ) : null}
            <div className='prose min-w-0 flex-1 px-4'>{children}</div>
            {comments ? (
              <PostComments
                slug={slug}
                className='[&_form>div]:!rounded-none rounded-none border-0 border-border/70 border-t border-dashed dark:border-border'
              />
            ) : null}
          </div>
        </article>
      </Section>
    </>
  );
}