Spaces:
Running
Running
File size: 2,499 Bytes
7dfae77 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 | import { ALL_STEMS, STEM_CONFIG } from "../types";
interface StemCheckboxesProps {
selected: string[];
onChange: (stems: string[]) => void;
disabled?: boolean;
}
export function StemCheckboxes({
selected,
onChange,
disabled,
}: StemCheckboxesProps) {
const toggle = (stem: string) => {
if (selected.includes(stem)) {
onChange(selected.filter((s) => s !== stem));
} else {
onChange([...selected, stem]);
}
};
const allSelected = selected.length === ALL_STEMS.length;
const toggleAll = () => {
onChange(allSelected ? [] : [...ALL_STEMS]);
};
return (
<div className="space-y-3">
<div className="flex items-center justify-between">
<span className="text-sm font-medium text-text-secondary">
Select stems to separate
</span>
<button
onClick={toggleAll}
disabled={disabled}
className="text-xs text-text-secondary hover:text-text-primary transition-colors disabled:opacity-50"
>
{allSelected ? "Deselect All" : "Select All"}
</button>
</div>
<div className="grid grid-cols-2 md:grid-cols-3 gap-2">
{ALL_STEMS.map((stem) => {
const config = STEM_CONFIG[stem];
const checked = selected.includes(stem);
return (
<button
key={stem}
onClick={() => toggle(stem)}
disabled={disabled}
className={`
flex items-center gap-2 px-3 py-2.5 rounded-lg border transition-all text-sm
${
checked
? "border-transparent"
: "border-border hover:border-text-secondary"
}
disabled:opacity-50
`}
style={
checked
? {
backgroundColor: config.color + "15",
borderColor: config.color + "40",
}
: undefined
}
>
<span
className="w-3 h-3 rounded-full flex-shrink-0"
style={{ backgroundColor: checked ? config.color : "#4a4a5a" }}
/>
<span
className="font-medium"
style={{ color: checked ? config.color : undefined }}
>
{config.label}
</span>
</button>
);
})}
</div>
</div>
);
}
|