Nicolas Cantu
5ea0ed21e1
- Replace DocsHeader with PageHeader and Footer - Update DocsSidebar with dark cyberpunk theme - Update DocsContent with dark theme and styled prose - Use i18n for page title - All TypeScript checks pass
42 lines
1.3 KiB
TypeScript
42 lines
1.3 KiB
TypeScript
import React from 'react'
|
|
|
|
type DocSection = 'user-guide' | 'faq' | 'publishing' | 'payment'
|
|
|
|
interface DocLink {
|
|
id: DocSection
|
|
title: string
|
|
file: string
|
|
}
|
|
|
|
interface DocsSidebarProps {
|
|
docs: DocLink[]
|
|
selectedDoc: DocSection
|
|
onSelectDoc: (docId: DocSection) => void
|
|
}
|
|
|
|
export function DocsSidebar({ docs, selectedDoc, onSelectDoc }: DocsSidebarProps) {
|
|
return (
|
|
<aside className="lg:w-64 flex-shrink-0">
|
|
<div className="bg-cyber-dark border border-neon-cyan/20 rounded-lg p-4 sticky top-4 backdrop-blur-sm">
|
|
<h2 className="text-lg font-bold mb-4 text-neon-cyan font-mono">Documentation</h2>
|
|
<nav className="space-y-2">
|
|
{docs.map((doc) => (
|
|
<button
|
|
key={doc.id}
|
|
onClick={() => onSelectDoc(doc.id)}
|
|
className={`w-full text-left px-3 py-2 rounded-lg text-sm transition-all ${
|
|
selectedDoc === doc.id
|
|
? 'bg-neon-cyan/20 text-neon-cyan font-medium border border-neon-cyan/50 shadow-glow-cyan'
|
|
: 'text-cyber-accent hover:bg-cyber-dark/50 hover:text-neon-cyan border border-transparent hover:border-neon-cyan/30'
|
|
}`}
|
|
>
|
|
{doc.title}
|
|
</button>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
</aside>
|
|
)
|
|
}
|
|
|