e201ecd28a
* Extract reusable league wizard components; wire settings page (#103) Extracts 9 domain components from new.tsx and $leagueId.settings.tsx into app/components/league/ (each with a Storybook story), consolidates wizard form-building into wizard-state.ts, and updates the settings page to use the shared components instead of hand-rolled duplicates. new.tsx shrinks from ~2000 → ~1280 lines. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * Fix sports-season test: add participants to mock data findDraftableSportsSeasons now returns participantCount, which requires participants in the mock db response. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * Fix sports-season test: loosen makeMockDb type to Record<string, unknown>[] typeof mockSeasons became too strict after adding participants to the mock data, breaking inline arrays in other tests that don't include participants. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
59 lines
1.9 KiB
TypeScript
59 lines
1.9 KiB
TypeScript
import { ChessPawn, Hourglass } from "lucide-react";
|
|
import { GradientIcon } from "~/components/ui/GradientIcon";
|
|
import { cn } from "~/lib/utils";
|
|
|
|
export interface TimerModeSelectorProps {
|
|
value: "chess_clock" | "standard";
|
|
onChange: (v: "chess_clock" | "standard") => void;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
const MODES = [
|
|
{
|
|
value: "chess_clock" as const,
|
|
label: "Chess Clock",
|
|
icon: ChessPawn,
|
|
desc: "Time bank + bonus per pick; bank early to save time for tough decisions",
|
|
},
|
|
{
|
|
value: "standard" as const,
|
|
label: "Standard",
|
|
icon: Hourglass,
|
|
desc: "Traditional fixed timer; each pick gets the same amount of time, no banking or carry-over",
|
|
},
|
|
];
|
|
|
|
export function TimerModeSelector({ value, onChange, disabled }: TimerModeSelectorProps) {
|
|
return (
|
|
<div className="grid grid-cols-2 gap-3">
|
|
{MODES.map((mode) => {
|
|
const selected = value === mode.value;
|
|
return (
|
|
<button
|
|
key={mode.value}
|
|
type="button"
|
|
onClick={() => onChange(mode.value)}
|
|
disabled={disabled}
|
|
className={cn(
|
|
"flex flex-col items-center gap-2 p-4 rounded-lg border-2 transition-all",
|
|
selected ? "border-primary" : "border-border hover:border-primary/60",
|
|
disabled && "opacity-50 cursor-not-allowed"
|
|
)}
|
|
>
|
|
<GradientIcon
|
|
icon={mode.icon}
|
|
className="h-7 w-7"
|
|
style={selected ? undefined : { stroke: "var(--muted-foreground)" }}
|
|
/>
|
|
<span className={cn("text-sm font-semibold", !selected && "text-muted-foreground")}>
|
|
{mode.label}
|
|
</span>
|
|
<span className="text-xs text-muted-foreground text-center leading-tight">
|
|
{mode.desc}
|
|
</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|