84 lines
2.2 KiB
TypeScript
84 lines
2.2 KiB
TypeScript
import Head from 'next/head'
|
|
import Link from 'next/link'
|
|
import { ConnectButton } from '@/components/ConnectButton'
|
|
import { DocsSidebar } from '@/components/DocsSidebar'
|
|
import { DocsContent } from '@/components/DocsContent'
|
|
import { useDocs } from '@/hooks/useDocs'
|
|
|
|
type DocSection = 'user-guide' | 'faq' | 'publishing' | 'payment'
|
|
|
|
interface DocLink {
|
|
id: DocSection
|
|
title: string
|
|
file: string
|
|
}
|
|
|
|
const docs: DocLink[] = [
|
|
{
|
|
id: 'user-guide',
|
|
title: 'Guide d\'utilisation',
|
|
file: 'user-guide.md',
|
|
},
|
|
{
|
|
id: 'faq',
|
|
title: 'FAQ',
|
|
file: 'faq.md',
|
|
},
|
|
{
|
|
id: 'publishing',
|
|
title: 'Guide de publication',
|
|
file: 'publishing-guide.md',
|
|
},
|
|
{
|
|
id: 'payment',
|
|
title: 'Guide de paiement',
|
|
file: 'payment-guide.md',
|
|
},
|
|
]
|
|
|
|
function DocsHeader() {
|
|
return (
|
|
<header className="bg-white shadow-sm">
|
|
<div className="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
|
|
<Link href="/" className="text-2xl font-bold text-gray-900 hover:text-gray-700">
|
|
Nostr Paywall
|
|
</Link>
|
|
<div className="flex items-center gap-4">
|
|
<Link
|
|
href="/"
|
|
className="px-4 py-2 text-gray-600 hover:text-gray-800 text-sm font-medium"
|
|
>
|
|
Articles
|
|
</Link>
|
|
<ConnectButton />
|
|
</div>
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|
|
|
|
export default function DocsPage() {
|
|
const { selectedDoc, docContent, loading, loadDoc } = useDocs(docs)
|
|
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>Documentation - Nostr Paywall</title>
|
|
<meta name="description" content="Documentation complète pour Nostr Paywall" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
</Head>
|
|
<main className="min-h-screen bg-gray-50">
|
|
<DocsHeader />
|
|
<div className="max-w-7xl mx-auto px-4 py-8">
|
|
<div className="flex flex-col lg:flex-row gap-8">
|
|
<DocsSidebar docs={docs} selectedDoc={selectedDoc} onSelectDoc={loadDoc} />
|
|
<div className="flex-1">
|
|
<DocsContent content={docContent} loading={loading} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</>
|
|
)
|
|
}
|