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 class="w-full max-w-3xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-5">
  {
    prev ? (
      <a
        href={getGuideUrl(framework, prev.slug)}
        class="grid items-center gap-x-2 p-4 border border-light-40 dark:border-dark-80 rounded-lg intent:border-dark-40 dark:intent:border-dark-40"
        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-sm text-dark-80 dark:text-light-40" style="grid-area: direction;">
          Previous
        </div>
        <div class="text-base font-medium 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 p-4 border border-light-40 dark:border-dark-80 rounded-lg intent:border-dark-40 text-right dark:intent:border-dark-40"
        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-sm text-dark-80 dark:text-light-40" style="grid-area: direction;">
          Next
        </div>
        <div class="text-base font-medium 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>