文档翻页设计

<DocPagination
  prevDoc={{ slug: 'docs/previous', title: '上一页标题' }}
  nextDoc={{ slug: 'docs/next', title: '下一页标题' }}
/>

<CompactDocPagination
  prevDoc={{ slug: 'docs/previous', title: '上一页' }}
  nextDoc={{ slug: 'docs/next', title: '下一页' }}
/>

.flex-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.hidden.md\:flex {
  display: none;
}

@media (min-width: 768px) {
  .hidden.md\:flex {
    display: flex;
    gap: 1rem;
  }
}

:root {
  --pagination-border: hsl(var(--border));
  --pagination-bg: hsl(var(--background));
  --pagination-hover: hsl(var(--accent));
  --pagination-text: hsl(var(--foreground));
  --pagination-muted: hsl(var(--muted-foreground));
}

<DocPagination
  prevDoc={prevDoc}
  nextDoc={nextDoc}
  className="my-custom-class"
/>

import { DocPagination } from '@/components/features/docs/doc-pagination';

function DocPage() {
  return (
    <div>
      <h1>文档标题</h1>
      <DocPagination
        prevDoc={{ slug: 'intro', title: '介绍' }}
        nextDoc={{ slug: 'guide', title: '使用指南' }}
      />
    </div>
  );
}

import { getPrevNextDocs } from '@/components/features/docs/pagination-utils';

function DocPage({ currentDoc, allDocs }) {
  const { prev, next } = getPrevNextDocs(allDocs, currentDoc.slug);

  return (
    <DocPagination
      prevDoc={prev}
      nextDoc={next}
      className="mt-16 border-t pt-8"
    />
  );
}