v10/site/src/components/docs/DocsNavigation.astro

---
import { ChevronDown } from 'lucide-react';
import type { Guide, SupportedFramework } from '@/types/docs';

type Props = {
  prev: Guide | null;
  next: Guide | null;
  framework: SupportedFramework;
  docTitles: Map<string, string>;
};

const { prev, next, framework, docTitles } = Astro.props;

function getGuideUrl(framework: SupportedFramework, slug: string): string {
  return `/docs/framework/${framework}/${slug}`;
}
---

<nav
  aria-label="Docs pagination"
  class="mx-auto grid w-full max-w-3xl grid-cols-1 gap-4 md:grid-cols-2"
>
  {
    prev ? (
      <a
        href={getGuideUrl(framework, prev.slug)}
        class="grid items-center gap-x-2 rounded-xs border border-manila-dark p-4 dark:border-warm-gray intent:bg-manila-75 dark:intent:bg-warm-gray"
        style="grid-template-areas: 'empty direction' 'icon title'; grid-template-columns: auto minmax(0,1fr); grid-template-rows: auto minmax(0,1fr);"
      >
        <div class="text-p3" style="grid-area: direction;">
          Previous
        </div>
        <div class="text-p2 font-bold text-balance" style="grid-area: title">
          {prev.sidebarLabel || docTitles.get(prev.slug)}
        </div>
        <div style="grid-area: icon">
          <ChevronDown size={12} className="rotate-90" />
        </div>
      </a>
    ) : (
      <div />
    )
  }
  {
    next ? (
      <a
        href={getGuideUrl(framework, next.slug)}
        class="grid items-center gap-x-2 rounded-xs border border-manila-dark p-4 text-right dark:border-warm-gray intent:bg-manila-75 dark:intent:bg-warm-gray"
        style="grid-template-areas: 'direction empty' 'title icon';grid-template-columns: minmax(0,1fr) auto; grid-template-rows: auto minmax(0,1fr);"
      >
        <div class="text-p3" style="grid-area: direction;">
          Next
        </div>
        <div class="text-p2 font-bold text-balance" style="grid-area: title">
          {next.sidebarLabel || docTitles.get(next.slug)}
        </div>
        <div style="grid-area: icon">
          <ChevronDown size={12} className="-rotate-90" />
        </div>
      </a>
    ) : (
      <div />
    )
  }
</nav>