File size: 1,539 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";
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>
);
}
|