Build Evil Wordle app

src/components/ModeSelector.tsx

@@ -0,0 +1,44 @@
+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>
+  );
+}