x

src/components/BenchmarkComparisonSelector.tsx

@@ -1,6 +1,6 @@
-// components/BenchmarkComparisonSelector.tsx
 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[];
@@ -13,20 +13,38 @@ export const BenchmarkComparisonSelector: React.FC<Props> = ({
   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="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>
+    </>
   );
 };