File size: 4,118 Bytes
ea15c76 263280b ea15c76 263280b ea15c76 263280b ea15c76 263280b ea15c76 263280b ea15c76 263280b ea15c76 263280b ea15c76 263280b ea15c76 263280b ea15c76 263280b ea15c76 263280b ea15c76 263280b ea15c76 263280b ea15c76 263280b ea15c76 263280b | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 | export type SidebarSection =
| 'new'
| 'history'
| 'saved'
| 'analytics'
| 'documentation'
| 'help'
| 'settings';
interface SidebarProps {
activeSection: SidebarSection;
historyCount: number;
savedCount: number;
onReset: () => void;
onSelectSection: (section: SidebarSection) => void;
}
export function Sidebar({
activeSection,
historyCount,
savedCount,
onReset,
onSelectSection,
}: SidebarProps) {
const navButtonClass = (section: SidebarSection) =>
`w-full flex items-center gap-3 px-4 py-3 rounded-lg text-left ${
activeSection === section
? 'bg-gray-100 text-gray-900'
: 'text-gray-600 hover:bg-gray-100'
}`;
return (
<aside className="w-64 bg-white border-r border-gray-200 p-6 flex flex-col">
{/* Logo */}
<div className="flex items-center gap-3 mb-8">
<div className="w-10 h-10 bg-black rounded-lg flex items-center justify-center">
<span className="text-white text-xl">🤟</span>
</div>
<span className="font-semibold">LumiSign</span>
</div>
{/* Navigation */}
<nav className="flex-1">
<div className="space-y-2">
<button
onClick={() => {
onReset();
onSelectSection('new');
}}
className={navButtonClass('new')}
>
<span>📹</span>
<span>New Translation</span>
</button>
<button
onClick={() => onSelectSection('history')}
className={navButtonClass('history')}
>
<span>🕐</span>
<span className="flex-1">History</span>
<span className="rounded bg-gray-200 px-2 py-0.5 text-xs text-gray-700">
{historyCount}
</span>
</button>
<button
onClick={() => onSelectSection('saved')}
className={navButtonClass('saved')}
>
<span>🔖</span>
<span className="flex-1">Saved</span>
<span className="rounded bg-gray-200 px-2 py-0.5 text-xs text-gray-700">
{savedCount}
</span>
</button>
<button
onClick={() => onSelectSection('analytics')}
className={navButtonClass('analytics')}
>
<span>📊</span>
<span>Analytics</span>
</button>
</div>
{/* Resources Section */}
<div className="mt-8">
<div className="text-xs uppercase text-gray-400 mb-3 px-4">Resources</div>
<div className="space-y-2">
<button
onClick={() => onSelectSection('documentation')}
className={navButtonClass('documentation')}
>
<span>📚</span>
<span>Documentation</span>
</button>
<button
onClick={() => onSelectSection('help')}
className={navButtonClass('help')}
>
<span>❓</span>
<span>Help Center</span>
</button>
<button
onClick={() => onSelectSection('settings')}
className={navButtonClass('settings')}
>
<span>⚙️</span>
<span>Settings</span>
</button>
</div>
</div>
</nav>
{/* User Profile */}
<div className="pt-6 border-t border-gray-200">
<div className="flex items-center gap-3 px-4 py-3">
<div className="w-10 h-10 bg-gray-300 rounded-full flex items-center justify-center">
<span>👤</span>
</div>
<div className="flex-1">
<div className="font-medium">Local Session</div>
<div className="text-sm text-gray-500">Stored in this browser</div>
</div>
<button
onClick={() => onSelectSection('settings')}
className="text-gray-400 hover:text-gray-600"
aria-label="Open settings"
>
⋮
</button>
</div>
</div>
</aside>
);
}
|