65 lines
2.3 KiB
TypeScript
65 lines
2.3 KiB
TypeScript
import type { Difficulty, Settings } from '../types';
|
|
|
|
type SettingsPanelProps = {
|
|
settings: Settings;
|
|
onChange: (settings: Settings) => void;
|
|
};
|
|
|
|
const difficulties: Array<{ value: Difficulty; label: string }> = [
|
|
{ value: 'wicked', label: 'Wicked' },
|
|
{ value: 'vicious', label: 'Vicious' },
|
|
{ value: 'nightmare', label: 'Nightmare' },
|
|
];
|
|
|
|
export function SettingsPanel({ settings, onChange }: SettingsPanelProps) {
|
|
return (
|
|
<div className="rounded-lg border border-slate-800 bg-slate-950/70 p-4">
|
|
<div className="flex items-center justify-between gap-3">
|
|
<h2 className="text-sm font-black uppercase tracking-[0.2em] text-slate-300">Settings</h2>
|
|
</div>
|
|
|
|
<div className="mt-4 space-y-4">
|
|
<div>
|
|
<label className="text-xs font-bold uppercase text-slate-500" htmlFor="word-length">
|
|
Word length
|
|
</label>
|
|
<div className="mt-2 grid grid-cols-4 gap-2" id="word-length">
|
|
{[4, 5, 6, 7].map((length) => (
|
|
<button
|
|
className={`rounded-md border px-3 py-2 text-sm font-black ${
|
|
settings.wordLength === length
|
|
? 'border-rose-400 bg-rose-500/20 text-rose-100'
|
|
: 'border-slate-800 bg-slate-900 text-slate-300 hover:border-slate-600'
|
|
}`}
|
|
key={length}
|
|
onClick={() => onChange({ ...settings, wordLength: length as Settings['wordLength'] })}
|
|
type="button"
|
|
>
|
|
{length}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="text-xs font-bold uppercase text-slate-500" htmlFor="difficulty">
|
|
Difficulty
|
|
</label>
|
|
<select
|
|
className="mt-2 w-full rounded-md border border-slate-800 bg-slate-900 px-3 py-2 text-sm font-semibold text-slate-100 outline-none focus:border-rose-400"
|
|
id="difficulty"
|
|
onChange={(event) => onChange({ ...settings, difficulty: event.target.value as Difficulty })}
|
|
value={settings.difficulty}
|
|
>
|
|
{difficulties.map((difficulty) => (
|
|
<option key={difficulty.value} value={difficulty.value}>
|
|
{difficulty.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|