import AppLayout from '@admin/layouts/app-layout'; import { Badge } from '@admin/components/ui/badge'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@admin/components/ui/card'; import { Input } from '@admin/components/ui/input'; import { Head, Link } from '@inertiajs/react'; import { BookOpen, FileText, Clock, Search, ArrowRight } from 'lucide-react'; import { ReactNode, useState } from 'react'; import HeadingSmall from '@admin/components/heading-small'; interface DocFile { name: string; title: string; path: string; size: number; modified: number; } interface DocsIndexProps { files: DocFile[]; } function Index({ files }: DocsIndexProps) { const [searchQuery, setSearchQuery] = useState(''); const formatDate = (timestamp: number) => { return new Date(timestamp * 1000).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric', }); }; const formatSize = (bytes: number) => { if (bytes < 1024) return bytes + ' B'; if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB'; return (bytes / (1024 * 1024)).toFixed(1) + ' MB'; }; // Filter files based on search query const filteredFiles = files.filter((file) => file.title.toLowerCase().includes(searchQuery.toLowerCase()) || file.name.toLowerCase().includes(searchQuery.toLowerCase()) ); return ( <>
{files.length > 0 && ( {files.length} {files.length === 1 ? 'Document' : 'Documents'} )}
{/* Search Bar */} {files.length > 0 && (
setSearchQuery(e.target.value)} className="pl-10" />
)} {/* Documentation Files */} {files.length === 0 ? (

No Documentation Found

Add markdown files to the /docs directory

Getting Started ) : filteredFiles.length === 0 ? (

No Results Found

Try adjusting your search query

) : (
{filteredFiles.map((file) => (

{file.title}

.md {formatSize(file.size)}
))}
)}
); } Index.layout = (page: ReactNode) => ( {page} ); export default Index;