completionId: cgen-5c660d54c80e4a1a9edd5650f85dada1

cgen-5c660d54c80e4a1a9edd5650f85dada1
This commit is contained in:
Builder.io 2025-11-09 09:03:01 +00:00
parent f4de8ad8bf
commit 2302c247af

View file

@ -1,5 +1,5 @@
import React, { useState, useMemo } from "react"; import React, { useState, useMemo } from "react";
import { Link, useLocation } from "react-router-dom"; import { Link, useLocation, Outlet } from "react-router-dom";
import { import {
Search, Search,
Menu, Menu,
@ -81,8 +81,8 @@ const docNavigation: DocNavItem[] = [
]; ];
interface DocsLayoutProps { interface DocsLayoutProps {
children: React.ReactNode; children?: React.ReactNode;
title: string; title?: string;
description?: string; description?: string;
breadcrumbs?: Array<{ label: string; path?: string }>; breadcrumbs?: Array<{ label: string; path?: string }>;
tableOfContents?: Array<{ id: string; label: string; level: number }>; tableOfContents?: Array<{ id: string; label: string; level: number }>;
@ -90,7 +90,7 @@ interface DocsLayoutProps {
export default function DocsLayout({ export default function DocsLayout({
children, children,
title, title = "Documentation",
description, description,
breadcrumbs, breadcrumbs,
tableOfContents = [], tableOfContents = [],
@ -211,16 +211,19 @@ export default function DocsLayout({
<div className="grid grid-cols-1 lg:grid-cols-4 gap-8 px-6 md:px-8 py-8 max-w-7xl mx-auto"> <div className="grid grid-cols-1 lg:grid-cols-4 gap-8 px-6 md:px-8 py-8 max-w-7xl mx-auto">
{/* Content */} {/* Content */}
<div className="lg:col-span-3"> <div className="lg:col-span-3">
{/* Page Header */} {title && (
<div className="mb-8"> <div className="mb-8">
<h1 className="text-5xl font-bold text-slate-900 mb-3">{title}</h1> <h1 className="text-5xl font-bold text-slate-900 mb-3">{title}</h1>
{description && ( {description && (
<p className="text-lg text-slate-600">{description}</p> <p className="text-lg text-slate-600">{description}</p>
)} )}
</div> </div>
)}
{/* Content */} {/* Content - either children (for wrapper) or Outlet (for routing) */}
<div className="prose prose-slate max-w-none">{children}</div> <div className="prose prose-slate max-w-none">
{children || <Outlet />}
</div>
</div> </div>
{/* Table of Contents - Right Sidebar */} {/* Table of Contents - Right Sidebar */}