File size: 1,310 Bytes
65d68f5 | 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 | "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>
);
}
|