File size: 1,427 Bytes
829c0ca f911da5 829c0ca f911da5 829c0ca f911da5 829c0ca |
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 |
import React from "react";
import { Checkbox } from "@/components/ui/checkbox";
import { Button } from "@/components/ui/button"; // Assuming you have a Button component
interface Props {
allMetrics: string[];
selected: string[];
onChange: (metric: string, checked: boolean) => void;
}
export const BenchmarkComparisonSelector: React.FC<Props> = ({
allMetrics,
selected,
onChange,
}) => {
const allSelected = allMetrics.every((metric) => selected.includes(metric));
const toggleAll = () => {
allMetrics.forEach((metric) => {
const shouldCheck = !allSelected;
onChange(metric, shouldCheck);
});
};
return (
<>
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2 mb-4">
{allMetrics.map((metric) => (
<div key={metric} className="flex items-center space-x-2">
<Checkbox
id={metric}
checked={selected.includes(metric)}
onCheckedChange={(checked) => onChange(metric, !!checked)}
/>
<label htmlFor={metric} className="text-sm">
{metric.replace(/_/g, " ").toUpperCase()}
</label>
</div>
))}
</div>
<div className="flex justify-start py-4">
<Button size="sm" variant="ghost" onClick={toggleAll}>
{allSelected ? "Uncheck All" : "Check All"}
</Button>
</div>
</>
);
};
|