| "use client"; | |
| /** | |
| * Mode Switcher | |
| * Simple reusable mode switcher for switching between DocDoe modes | |
| */ | |
| import { useDocDoeMode } from "../mode-selection/useDocDoeMode"; | |
| import type { DocDoeMode } from "./modeStorage"; | |
| interface ModeSwitcherProps { | |
| className?: string; | |
| } | |
| export function ModeSwitcher({ className = "" }: ModeSwitcherProps) { | |
| const { mode, switchMode } = useDocDoeMode(); | |
| const modes: Array<{ mode: DocDoeMode; label: string; aria: string }> = [ | |
| { mode: "tuition", label: "Today's Tuition", aria: "Switch to Today's Tuition" }, | |
| { mode: "study-chat", label: "Study Chat", aria: "Switch to Study Chat" }, | |
| { mode: "learn-anything", label: "Learn Anything", aria: "Switch to Learn Anything" }, | |
| ]; | |
| return ( | |
| <div className={`flex flex-wrap items-center gap-2 ${className}`}> | |
| {modes.map((item) => ( | |
| <button | |
| key={item.mode} | |
| type="button" | |
| onClick={() => switchMode(item.mode)} | |
| className={`rounded-lg px-3 py-1.5 text-sm font-medium transition-colors ${ | |
| mode === item.mode | |
| ? "bg-white/10 text-white" | |
| : "text-white/60 hover:bg-white/5 hover:text-white" | |
| }`} | |
| aria-label={item.aria} | |
| > | |
| {item.label} | |
| </button> | |
| ))} | |
| </div> | |
| ); | |
| } | |