spb/fetcha

1import * as React from "react";2import Link from "next/link";3import { ArrowLeft, ArrowRight } from "lucide-react";4import { Badge } from "@/components/ui/badge";5import { cn } from "@/lib/utils";6import { getPrevNext } from "./nav-config";78export type DocStatus = "Stable" | "Beta" | "Coming soon" | "Reference";910const STATUS_VARIANT: Record<DocStatus, "success" | "info" | "warning" | "default"> = {11  Stable: "success",12  Beta: "info",13  "Coming soon": "warning",14  Reference: "default",15};1617export function DocPage({18  path,19  eyebrow,20  title,21  description,22  status,23  children,24  className,25}: {26  /** Route of this page, e.g. `/docs/fetch`. Used for prev/next links. */27  path: string;28  eyebrow?: string;29  title: string;30  description?: React.ReactNode;31  status?: DocStatus;32  children: React.ReactNode;33  className?: string;34}) {35  const { prev, next } = getPrevNext(path);36  return (37    <article data-docs-article className={cn("min-w-0 animate-fade-in", className)}>38      <header className="border-b border-border pb-6">39        <div className="flex flex-wrap items-center gap-2 text-[12px] font-medium uppercase tracking-wide text-fg-subtle">40          <span>{eyebrow ?? "Documentation"}</span>41          {status ? (42            <Badge variant={STATUS_VARIANT[status]} dot>43              {status}44            </Badge>45          ) : null}46        </div>47        <h1 className="mt-2 text-[30px] font-semibold leading-tight tracking-tight text-fg sm:text-[34px]">{title}</h1>48        {description ? <p className="mt-3 max-w-2xl text-[16px] leading-relaxed text-fg-muted">{description}</p> : null}49      </header>5051      <div className="pt-6">{children}</div>5253      <footer className="mt-14 border-t border-border pt-6">54        <div className="grid gap-3 sm:grid-cols-2">55          {prev ? (56            <Link href={prev.href} className="group flex flex-col rounded-lg border border-border p-4 transition-colors hover:border-border-strong hover:bg-bg-subtle">57              <span className="flex items-center gap-1 text-[12px] text-fg-subtle">58                <ArrowLeft className="size-3.5" aria-hidden /> Previous59              </span>60              <span className="mt-1 text-[14.5px] font-medium text-fg">{prev.title}</span>61            </Link>62          ) : (63            <span />64          )}65          {next ? (66            <Link href={next.href} className="group flex flex-col items-end rounded-lg border border-border p-4 text-right transition-colors hover:border-border-strong hover:bg-bg-subtle">67              <span className="flex items-center gap-1 text-[12px] text-fg-subtle">68                Next <ArrowRight className="size-3.5" aria-hidden />69              </span>70              <span className="mt-1 text-[14.5px] font-medium text-fg">{next.title}</span>71            </Link>72          ) : null}73        </div>74        <p className="mt-6 text-[12.5px] text-fg-subtle">75          Questions or a mistake in this page? Email{" "}76          <a href="mailto:support@fetcha.co" className="text-fg-muted underline underline-offset-2 hover:text-fg">77            support@fetcha.co78          </a>{" "}79          and include the request ID when it concerns a specific call.80        </p>81      </footer>82    </article>83  );84}85