2026-01-06 14:17:55 +01:00

69 lines
1.9 KiB
TypeScript

import Head from 'next/head'
import { DocsSidebar } from '@/components/DocsSidebar'
import { DocsContent } from '@/components/DocsContent'
import { PageHeader } from '@/components/PageHeader'
import { Footer } from '@/components/Footer'
import { useDocs, type DocLink, type DocSection } from '@/hooks/useDocs'
import { t } from '@/lib/i18n'
export default function DocsPage(): React.ReactElement {
const docs: DocLink[] = [
{
id: 'user-guide',
title: t('docs.userGuide'),
file: 'user-guide.md',
},
{
id: 'faq',
title: t('docs.faq'),
file: 'faq.md',
},
{
id: 'publishing',
title: t('docs.publishing'),
file: 'publishing-guide.md',
},
{
id: 'payment',
title: t('docs.payment'),
file: 'payment-guide.md',
},
{
id: 'fees-and-contributions',
title: t('docs.feesAndContributions'),
file: 'fees-and-contributions.md',
},
]
const { selectedDoc, docContent, loading, loadDoc } = useDocs(docs)
return (
<>
<Head>
<title>{t('nav.documentation')} - zapwall.fr</title>
<meta name="description" content={t('docs.meta.description')} />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
</Head>
<main className="min-h-screen bg-cyber-darker">
<PageHeader />
<div className="w-full px-4 py-8">
<div className="flex flex-col lg:flex-row gap-8">
<DocsSidebar
docs={docs}
selectedDoc={selectedDoc}
onSelectDoc={(slug: DocSection) => {
void loadDoc(slug)
}}
/>
<div className="flex-1">
<DocsContent content={docContent} loading={loading} />
</div>
</div>
</div>
<Footer />
</main>
</>
)
}