import AppLayout from '@admin/layouts/app-layout'; import { Badge } from '@admin/components/ui/badge'; import { Button } from '@admin/components/ui/button'; import { Card, CardContent } from '@admin/components/ui/card'; import { ScrollArea } from '@admin/components/ui/scroll-area'; import { Head, Link } from '@inertiajs/react'; import { ArrowLeft, BookOpen, FileText, ChevronRight } from 'lucide-react'; import { ReactNode } from 'react'; import ReactMarkdown from 'react-markdown'; import remarkGfm from 'remark-gfm'; import rehypeHighlight from 'rehype-highlight'; import 'highlight.js/styles/github-dark.css'; interface DocFile { name: string; title: string; path: string; } interface DocsShowProps { file: string; content: string; files: DocFile[]; title: string; } function Show({ file, content, files, title }: DocsShowProps) { return ( <>
{/* Header matching User List layout */}

{title}

Dev Docs › {title}
{/* Sidebar Navigation */}

All Documents

{files.map((doc) => ( {doc.title} {doc.name === file && ( )} ))}
{/* Main Content */}
{ return inline ? ( {children} ) : ( {children} ); }, // Custom styling for tables table: ({ children, ...props }: any) => (
{children}
), // Custom styling for links a: ({ children, href, ...props }: any) => ( {children} ), }} > {content}
); } Show.layout = (page: ReactNode) => ( {page} ); export default Show;