| "use client"; | |
| import { useState } from "react"; | |
| import { CheckCircle2 } from "lucide-react"; | |
| import { cn } from "@/lib/utils"; | |
| import type { StudyMode } from "@/types"; | |
| type ModeSelectorProps = { | |
| modes: StudyMode[]; | |
| defaultMode?: StudyMode; | |
| }; | |
| export function ModeSelector({ modes, defaultMode }: ModeSelectorProps) { | |
| const [selectedMode, setSelectedMode] = useState<StudyMode>(defaultMode ?? modes[0]); | |
| return ( | |
| <div className="workspace-card p-4"> | |
| <p className="px-1 text-[13px] font-semibold text-[var(--text-primary)]">Choose output mode</p> | |
| <div className="mt-3 grid gap-2 sm:grid-cols-2 xl:grid-cols-4"> | |
| {modes.map((mode) => { | |
| const selected = selectedMode === mode; | |
| return ( | |
| <button | |
| key={mode} | |
| type="button" | |
| onClick={() => setSelectedMode(mode)} | |
| className={cn( | |
| "flex min-h-12 items-center justify-between gap-2 rounded-[var(--radius-sm)] border px-3.5 text-left text-[12px] font-semibold transition-all", | |
| selected | |
| ? "border-[var(--accent-primary)] bg-[var(--accent-primary-light)] text-[var(--accent-primary)]" | |
| : "border-[var(--border-subtle)] bg-[var(--bg-root)] text-[var(--text-muted)] hover:bg-[var(--bg-hover)]", | |
| )} | |
| > | |
| <span>{mode}</span> | |
| {selected ? <CheckCircle2 className="size-4 shrink-0" /> : null} | |
| </button> | |
| ); | |
| })} | |
| </div> | |
| </div> | |
| ); | |
| } | |