File size: 2,346 Bytes
5f5514e 945e815 5f5514e 945e815 5f5514e 9ff7e0c 5f5514e 945e815 5f5514e 383d246 5f5514e 383d246 945e815 5f5514e 383d246 5f5514e 383d246 5f5514e 945e815 5f5514e 945e815 | 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 | import React from 'react';
interface SidebarProps { currentPage: string; onNavigate: (page: any) => void; }
const nav = [
{ id: 'dashboard', label: 'Home' },
{ id: 'voice', label: 'Voice AI' },
{ id: 'send', label: 'Send' },
{ id: 'scan', label: 'Scan & Pay' },
{ id: 'contacts', label: 'Contacts' },
{ id: 'history', label: 'Transactions' },
{ id: 'security', label: 'Security' },
{ id: 'settings', label: 'Settings' },
];
export default function Sidebar({ currentPage, onNavigate }: SidebarProps) {
return (
<aside className="w-[200px] flex flex-col bg-canvas border-r border-hairline">
{/* Wordmark */}
<div className="px-5 pt-6 pb-5">
<div className="flex items-center gap-2">
<div className="w-7 h-7 rounded-full bg-primary flex items-center justify-center">
<span className="text-on-primary text-caption-strong font-bold">SV</span>
</div>
<span className="text-title-md text-ink">SolVox</span>
</div>
</div>
<div className="hairline-soft mx-5" />
{/* Nav Links */}
<nav className="flex-1 px-3 py-4 space-y-0.5">
{nav.map(item => (
<button key={item.id} onClick={() => onNavigate(item.id)}
className={`w-full text-left px-3 py-2.5 rounded-lg text-nav-link transition-colors ${
currentPage === item.id
? 'text-primary bg-primary/[0.06] font-semibold'
: 'text-body hover:text-ink hover:bg-surface-soft'
}`}>
{item.label}
</button>
))}
</nav>
{/* QVAC Status */}
<div className="px-4 pb-4">
<div className="bg-surface-soft rounded-xl p-3">
<div className="text-caption-strong text-muted uppercase tracking-wider mb-1.5">QVAC Engine</div>
<div className="flex items-center gap-1.5 flex-wrap">
{['LLM', 'STT', 'TTS', 'EMB', 'NMT', 'OCR'].map(m => (
<span key={m} className="badge-pill text-[10px] py-0">{m}</span>
))}
</div>
<div className="flex items-center gap-1.5 mt-2">
<div className="w-1.5 h-1.5 rounded-full bg-semantic-up" />
<span className="text-caption text-muted">100% local</span>
</div>
</div>
</div>
</aside>
);
}
|