63 lines
1.6 KiB
TypeScript
63 lines
1.6 KiB
TypeScript
import { Link } from "@tanstack/react-router";
|
|
|
|
type ContentIndexItem = {
|
|
title: string;
|
|
description?: string;
|
|
slugs: string[];
|
|
url: string;
|
|
};
|
|
|
|
type ContentIndexProps = {
|
|
eyebrow: string;
|
|
title: string;
|
|
description: string;
|
|
emptyLabel: string;
|
|
items: ContentIndexItem[];
|
|
route: "/docs/$";
|
|
};
|
|
|
|
export function ContentIndex({
|
|
eyebrow,
|
|
title,
|
|
description,
|
|
emptyLabel,
|
|
items,
|
|
route,
|
|
}: ContentIndexProps) {
|
|
return (
|
|
<div className="max-w-3xl mx-auto px-6 py-12 md:py-24">
|
|
<p className="text-sm font-medium text-fd-muted-foreground">{eyebrow}</p>
|
|
<h1 className="mt-3 text-4xl font-bold tracking-tight text-fd-foreground md:text-5xl">
|
|
{title}
|
|
</h1>
|
|
<p className="mt-4 max-w-2xl text-lg leading-8 text-fd-muted-foreground">
|
|
{description}
|
|
</p>
|
|
|
|
{items.length === 0 ? (
|
|
<p className="mt-10 text-fd-muted-foreground">{emptyLabel}</p>
|
|
) : (
|
|
<div className="mt-10 divide-y divide-fd-border border-y border-fd-border">
|
|
{items.map((item) => (
|
|
<Link
|
|
key={item.url}
|
|
to={route}
|
|
params={{ _splat: item.slugs.join("/") }}
|
|
className="group block py-6"
|
|
>
|
|
<h2 className="text-xl font-semibold text-fd-foreground transition-colors group-hover:text-fd-primary">
|
|
{item.title}
|
|
</h2>
|
|
{item.description ? (
|
|
<p className="mt-2 text-sm leading-6 text-fd-muted-foreground">
|
|
{item.description}
|
|
</p>
|
|
) : null}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|