advance

components/Tabs.tsx

@@ -1,3 +1,5 @@
+import { Tabs as TabsPrimitive, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
 type TabsProps<T extends string> = {
   options: readonly T[];
   active: T;
@@ -6,21 +8,18 @@ type TabsProps<T extends string> = {
 
 export default function Tabs<T extends string>({ options, active, onChange }: TabsProps<T>) {
   return (
-    <div className="inline-flex flex-wrap gap-2">
-      {options.map((option) => (
-        <button
-          key={option}
-          className={`rounded-xl border px-6 py-3 text-base font-semibold transition-colors ${
-            option === active
-              ? "border-accent bg-accent text-white shadow-sm"
-              : "border-slate-300 bg-white text-slate-700 hover:border-slate-400"
-          }`}
-          onClick={() => onChange(option)}
-          type="button"
-        >
-          {option}
-        </button>
-      ))}
-    </div>
+    <TabsPrimitive value={active} onValueChange={(v) => onChange(v as T)}>
+      <TabsList className="h-auto gap-2 bg-transparent p-0">
+        {options.map((option) => (
+          <TabsTrigger
+            key={option}
+            value={option}
+            className="rounded-xl border border-input bg-background px-4 py-2 text-sm font-semibold text-slate-700 data-[state=active]:border-primary data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-sm md:px-5 md:py-2.5"
+          >
+            {option}
+          </TabsTrigger>
+        ))}
+      </TabsList>
+    </TabsPrimitive>
   );
 }