| 43 | } |
| 44 | |
| 45 | export function SettingsNav({ active, onChange, searchQuery }: SettingsNavProps) { |
| 46 | const filtered = searchQuery |
| 47 | ? NAV_ITEMS.filter((item) => |
| 48 | item.label.toLowerCase().includes(searchQuery.toLowerCase()) |
| 49 | ) |
| 50 | : NAV_ITEMS; |
| 51 | |
| 52 | return ( |
| 53 | <nav className="w-48 flex-shrink-0 py-2"> |
| 54 | {filtered.map((item) => { |
| 55 | const Icon = item.icon; |
| 56 | return ( |
| 57 | <button |
| 58 | key={item.id} |
| 59 | onClick={() => onChange(item.id)} |
| 60 | className={cn( |
| 61 | "w-full flex items-center gap-2.5 px-3 py-2 rounded-md text-sm transition-colors text-left", |
| 62 | active === item.id |
| 63 | ? "bg-surface-800 text-surface-100" |
| 64 | : "text-surface-400 hover:text-surface-200 hover:bg-surface-800/50" |
| 65 | )} |
| 66 | > |
| 67 | <Icon className="w-4 h-4 flex-shrink-0" /> |
| 68 | {item.label} |
| 69 | </button> |
| 70 | ); |
| 71 | })} |
| 72 | </nav> |
| 73 | ); |
| 74 | } |