Create frontend/src/components/ui/tabs.jsx

frontend/src/components/ui/tabs.jsx

@@ -0,0 +1,45 @@
+import React, { createContext, useContext } from "react";
+import { cn } from "@/lib/utils";
+
+const TabsContext = createContext(null);
+
+export function Tabs({ value, onValueChange, children, className }) {
+  return (
+    <TabsContext.Provider value={{ value, onValueChange }}>
+      <div className={className}>{children}</div>
+    </TabsContext.Provider>
+  );
+}
+
+export function TabsList({ className, ...props }) {
+  return (
+    <div
+      className={cn(
+        "inline-flex items-center justify-center rounded-lg bg-slate-100 p-0.5",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export function TabsTrigger({ value, className, children, ...props }) {
+  const ctx = useContext(TabsContext);
+  const selected = ctx?.value === value;
+
+  return (
+    <button
+      type="button"
+      onClick={() => ctx?.onValueChange && ctx.onValueChange(value)}
+      data-state={selected ? "active" : "inactive"}
+      className={cn(
+        "inline-flex items-center justify-center rounded-md px-3 py-1.5 text-xs font-medium text-slate-600 transition-colors",
+        "data-[state=active]:bg-white data-[state=active]:text-slate-900",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}