65 lines
2.7 KiB
TypeScript
65 lines
2.7 KiB
TypeScript
import Link from 'next/link';
|
|
|
|
const docsLinks = [
|
|
{ href: '/docs/overview', label: 'Product Overview' },
|
|
{ href: '/docs/installation', label: 'Installation Guide' },
|
|
{ href: '/docs/first-service', label: 'Deploy Your First Service' },
|
|
{ href: '/docs/integrations', label: 'Infrastructure Integrations' },
|
|
{ href: '/docs/premium', label: 'Premium Features' },
|
|
{ href: '/docs/api', label: 'API and Automation' },
|
|
{ href: '/docs/troubleshooting', label: 'Troubleshooting' },
|
|
];
|
|
|
|
export default function DocsLayout({
|
|
title,
|
|
intro,
|
|
children,
|
|
}: {
|
|
title: string;
|
|
intro: string;
|
|
children: React.ReactNode;
|
|
}) {
|
|
return (
|
|
<section className="relative py-12 sm:py-16 lg:py-20">
|
|
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
|
<div className="grid grid-cols-1 gap-10 lg:grid-cols-[260px_minmax(0,1fr)]">
|
|
<aside className="h-fit rounded-2xl border border-surface-700/50 bg-surface-900/50 p-5 lg:sticky lg:top-24">
|
|
<div className="mb-4">
|
|
<p className="text-xs font-semibold uppercase tracking-[0.2em] text-brand-400">Documentation</p>
|
|
<h2 className="mt-2 text-lg font-semibold text-surface-50">DashCaddy Docs</h2>
|
|
</div>
|
|
<nav className="space-y-2">
|
|
<Link
|
|
href="/docs"
|
|
className="block rounded-lg px-3 py-2 text-sm font-medium text-surface-300 transition-colors hover:bg-surface-800 hover:text-brand-400"
|
|
>
|
|
Docs Home
|
|
</Link>
|
|
{docsLinks.map((link) => (
|
|
<Link
|
|
key={link.href}
|
|
href={link.href}
|
|
className="block rounded-lg px-3 py-2 text-sm font-medium text-surface-300 transition-colors hover:bg-surface-800 hover:text-brand-400"
|
|
>
|
|
{link.label}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
</aside>
|
|
|
|
<article className="min-w-0 rounded-2xl border border-surface-700/50 bg-surface-900/40 p-6 sm:p-8 lg:p-10">
|
|
<header className="mb-10 border-b border-surface-700/50 pb-6">
|
|
<p className="mb-3 text-xs font-semibold uppercase tracking-[0.2em] text-brand-400">DashCaddy Documentation</p>
|
|
<h1 className="text-3xl font-bold text-surface-50 sm:text-4xl">{title}</h1>
|
|
<p className="mt-4 max-w-3xl text-base leading-7 text-surface-300 sm:text-lg">{intro}</p>
|
|
</header>
|
|
<div className="prose prose-invert max-w-none prose-headings:text-surface-50 prose-p:text-surface-300 prose-li:text-surface-300 prose-strong:text-surface-100">
|
|
{children}
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|