1import { ComparisonMode } from "../../types/comparison";
3interface ComparisonModeSelectorProps {
4 mode: ComparisonMode;
5 onModeChange: (mode: ComparisonMode) => void;
6}
8export const ComparisonModeSelector = ({
9 mode,
10 onModeChange,
11}: ComparisonModeSelectorProps) => {
12 const modes: { value: ComparisonMode; label: string }[] = [
13 { value: "original", label: "Original Only" },
14 { value: "overlay", label: "Overlay (Original + Reconstructed)" },
15 { value: "residuals", label: "Residuals (Original - Reconstructed)" },
16 { value: "side-by-side", label: "Side-by-Side" },
17 ];
19 return (
20 <div style={{ marginBottom: "16px" }}>
21 <label
22 style={{
23 display: "block",
24 marginBottom: "8px",
25 fontSize: "14px",
26 fontWeight: "500",
27 color: "#333",
28 }}
29 >
30 View mode:
31 </label>
32 <div style={{ display: "flex", gap: "12px", flexWrap: "wrap" }}>
33 {modes.map((m) => (
34 <label
35 key={m.value}
36 style={{
37 display: "flex",
38 alignItems: "center",
39 cursor: "pointer",
40 fontSize: "14px",
41 }}
42 >
43 <input
44 type="radio"
45 name="comparison-mode"
46 value={m.value}
47 checked={mode === m.value}
48 onChange={() => onModeChange(m.value)}
49 style={{ marginRight: "6px" }}
50 />
51 {m.label}
52 </label>
53 ))}
54 </div>
55 </div>
56 );
57};