diff --git a/client/components/docs/DocsLayout.tsx b/client/components/docs/DocsLayout.tsx new file mode 100644 index 00000000..d76869de --- /dev/null +++ b/client/components/docs/DocsLayout.tsx @@ -0,0 +1,397 @@ +import React, { useState, useMemo } from "react"; +import { Link, useLocation } from "react-router-dom"; +import { + Search, + Menu, + X, + ChevronRight, + BookOpen, + Code2, + Zap, + FileText, + GitBranch, + Layers, + BookMarked, +} from "lucide-react"; +import { Input } from "@/components/ui/input"; +import { Button } from "@/components/ui/button"; + +interface DocNavItem { + title: string; + path: string; + icon: React.ReactNode; + description?: string; +} + +const docNavigation: DocNavItem[] = [ + { + title: "Overview", + path: "/docs/overview", + icon: , + description: "Get started with AeThex", + }, + { + title: "Getting Started", + path: "/docs/getting-started", + icon: , + description: "Quick start guide", + }, + { + title: "Platform", + path: "/docs/platform", + icon: , + description: "Platform architecture & features", + }, + { + title: "API Reference", + path: "/docs/api-reference", + icon: , + description: "Complete API documentation", + }, + { + title: "CLI", + path: "/docs/cli", + icon: , + description: "Command line tools", + }, + { + title: "Tutorials", + path: "/docs/tutorials", + icon: , + description: "Step-by-step guides", + }, + { + title: "Examples", + path: "/docs/examples", + icon: , + description: "Code examples", + }, + { + title: "Integrations", + path: "/docs/integrations", + icon: , + description: "Third-party integrations", + }, + { + title: "Curriculum", + path: "/docs/curriculum", + icon: , + description: "Learning paths", + }, +]; + +interface DocsLayoutProps { + children: React.ReactNode; + title: string; + description?: string; + breadcrumbs?: Array<{ label: string; path?: string }>; + tableOfContents?: Array<{ id: string; label: string; level: number }>; +} + +export default function DocsLayout({ + children, + title, + description, + breadcrumbs, + tableOfContents = [], +}: DocsLayoutProps) { + const [sidebarOpen, setSidebarOpen] = useState(false); + const [searchQuery, setSearchQuery] = useState(""); + const location = useLocation(); + + const filteredNav = useMemo(() => { + if (!searchQuery) return docNavigation; + const query = searchQuery.toLowerCase(); + return docNavigation.filter( + (item) => + item.title.toLowerCase().includes(query) || + item.description?.toLowerCase().includes(query) + ); + }, [searchQuery]); + + const isCurrentPage = (path: string) => location.pathname === path; + + return ( +
+ {/* Header */} +
+
+
+ + +
+ +
+ + AeThex Docs + + +
+ + {/* Search Bar - Desktop */} +
+
+ + setSearchQuery(e.target.value)} + /> +
+
+ + {/* GitHub Link */} + + GitHub + +
+ + {/* Mobile Search */} +
+
+ + setSearchQuery(e.target.value)} + /> +
+
+
+ +
+ {/* Sidebar */} + + + {/* Main Content */} +
+ {/* Breadcrumbs */} + {breadcrumbs && ( +
+
+ + Docs + + {breadcrumbs.map((crumb, idx) => ( + + + {crumb.path ? ( + + {crumb.label} + + ) : ( + {crumb.label} + )} + + ))} +
+
+ )} + +
+ {/* Content */} +
+ {/* Page Header */} +
+

{title}

+ {description && ( +

{description}

+ )} +
+ + {/* Content */} +
{children}
+
+ + {/* Table of Contents - Right Sidebar */} + {tableOfContents.length > 0 && ( + + )} +
+ + {/* Footer */} + +
+
+ + {/* Mobile Overlay */} + {sidebarOpen && ( +
setSidebarOpen(false)} + /> + )} +
+ ); +}