45 lines
1.5 KiB
TypeScript
45 lines
1.5 KiB
TypeScript
import { Flame, Infinity as InfinityIcon, Ruler, Skull, Sun } from 'lucide-react';
|
|
import { MODE_DESCRIPTIONS, MODE_LABELS } from '../lib/modes';
|
|
import type { GameMode } from '../types';
|
|
|
|
type ModeSelectorProps = {
|
|
activeMode: GameMode;
|
|
onSelect: (mode: GameMode) => void;
|
|
};
|
|
|
|
const modes: Array<{ mode: GameMode; icon: typeof Sun }> = [
|
|
{ mode: 'daily', icon: Sun },
|
|
{ mode: 'infinite', icon: InfinityIcon },
|
|
{ mode: 'evil-daily', icon: Flame },
|
|
{ mode: 'custom', icon: Ruler },
|
|
{ mode: 'super-evil', icon: Skull },
|
|
];
|
|
|
|
export function ModeSelector({ activeMode, onSelect }: ModeSelectorProps) {
|
|
return (
|
|
<div className="grid gap-2 sm:grid-cols-2 xl:grid-cols-1">
|
|
{modes.map(({ mode, icon: Icon }) => {
|
|
const active = mode === activeMode;
|
|
return (
|
|
<button
|
|
className={`rounded-lg border p-3 text-left transition ${
|
|
active
|
|
? 'border-rose-400 bg-rose-500/15 shadow-ember'
|
|
: 'border-slate-800 bg-slate-950/70 hover:border-slate-600'
|
|
}`}
|
|
key={mode}
|
|
onClick={() => onSelect(mode)}
|
|
type="button"
|
|
>
|
|
<span className="flex items-center gap-2 text-sm font-black text-slate-100">
|
|
<Icon size={16} className={active ? 'text-rose-300' : 'text-slate-400'} />
|
|
{MODE_LABELS[mode]}
|
|
</span>
|
|
<span className="mt-1 block text-xs leading-5 text-slate-400">{MODE_DESCRIPTIONS[mode]}</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|