42 lines
1.1 KiB
TypeScript
42 lines
1.1 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-white rounded-lg shadow-sm p-4 sticky top-4">
|
|
<h2 className="text-lg font-bold mb-4">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-colors ${
|
|
selectedDoc === doc.id
|
|
? 'bg-blue-100 text-blue-700 font-medium'
|
|
: 'text-gray-600 hover:bg-gray-100'
|
|
}`}
|
|
>
|
|
{doc.title}
|
|
</button>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
</aside>
|
|
)
|
|
}
|
|
|