feat : improve UX/UI

components/public/condition-switcher.tsx

@@ -1,9 +1,10 @@
 "use client";
 
+import { MousePointerClickIcon } from "lucide-react";
 import { Children, type ReactNode, useState } from "react";
 
 import { ScrollableNav } from "@/components/public/scrollable-nav";
-import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 export function ConditionSwitcher({
   children,
@@ -20,23 +21,21 @@ export function ConditionSwitcher({
   if (items.length <= 1) return items[0] ?? null;
 
   return (
-    <div className="flex min-w-0 flex-col gap-4">
+    <Tabs className="min-w-0 gap-4" value={active} onValueChange={setActive}>
       <ScrollableNav ariaLabel={label} className="w-full min-w-0">
-        <ToggleGroup aria-label={label} variant="outline" value={[active]} onValueChange={(values) => {
-          if (values[0]) setActive(values[0]);
-        }}>
+        <TabsList aria-label={label} className="mx-auto shrink-0">
           {items.map((_, index) => (
-            <ToggleGroupItem
+            <TabsTrigger
               key={index}
               value={String(index)}
-              className="aria-pressed:bg-primary aria-pressed:text-primary-foreground"
             >
+              <MousePointerClickIcon className="text-primary group-aria-pressed/tabs:text-primary-foreground" aria-hidden="true" data-icon="inline-start" />
               {labels?.[index] || `Condition ${index + 1}`}
-            </ToggleGroupItem>
+            </TabsTrigger>
           ))}
-        </ToggleGroup>
+        </TabsList>
       </ScrollableNav>
-      {items[Number(active)]}
-    </div>
+      {items.map((item, index) => <TabsContent key={index} value={String(index)} className="text-base">{item}</TabsContent>)}
+    </Tabs>
   );
 }