import type { CatalogItem } from "@/lib/catalog";import { DocsMobileNav, DocsSidebar } from "@/components/docs/docs-sidebar"; export function DocsShell({ title, description, basePath, items, children,}: { title: string; description: React.ReactNode; basePath: "/components" | "/blocks"; items: CatalogItem[]; children: React.ReactNode;}) { return ( <div className="mx-auto flex w-full max-w-6xl gap-10 px-4 py-10 sm:px-6 lg:py-12"> <DocsSidebar items={items} basePath={basePath} /> <div className="min-w-0 flex-1"> <header className="max-w-2xl"> <h1 className="text-3xl font-semibold tracking-tight">{title}</h1> <p className="mt-3 text-pretty leading-relaxed text-muted-foreground"> {description} </p> </header> <DocsMobileNav items={items} basePath={basePath} /> <div className="mt-10 space-y-16 lg:mt-12">{children}</div> </div> </div> );} export function DocsSection({ id, title, color, children,}: { id: string; title: string; color?: string; children: React.ReactNode;}) { return ( <section id={id} className="scroll-mt-24"> <h2 className="mb-6 text-xl font-semibold tracking-tight" style={color ? { color } : undefined} > {title} </h2> <div className="space-y-14">{children}</div> </section> );}
import type { CatalogItem } from "@/lib/catalog";
import { DocsMobileNav, DocsSidebar } from "@/components/docs/docs-sidebar";
export function DocsShell({
title,
description,
basePath,
items,
children,
}: {
title: string;
description: React.ReactNode;
basePath: "/components" | "/blocks";
items: CatalogItem[];
children: React.ReactNode;
}) {
return (
<div className="mx-auto flex w-full max-w-6xl gap-10 px-4 py-10 sm:px-6 lg:py-12">
<DocsSidebar items={items} basePath={basePath} />
<div className="min-w-0 flex-1">
<header className="max-w-2xl">
<h1 className="text-3xl font-semibold tracking-tight">{title}</h1>
<p className="mt-3 text-pretty leading-relaxed text-muted-foreground">
{description}
</p>
</header>
<DocsMobileNav items={items} basePath={basePath} />
<div className="mt-10 space-y-16 lg:mt-12">{children}</div>
</div>
</div>
);
}
export function DocsSection({
id,
title,
color,
children,
}: {
id: string;
title: string;
color?: string;
children: React.ReactNode;
}) {
return (
<section id={id} className="scroll-mt-24">
<h2
className="mb-6 text-xl font-semibold tracking-tight"
style={color ? { color } : undefined}
>
{title}
</h2>
<div className="space-y-14">{children}</div>
</section>
);
}