Seed: landing template (12 files)

src/components/ui/tabs.tsx

@@ -0,0 +1,46 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+const TabsContext = React.createContext<{ value: string; setValue: (v: string) => void }>({ value: "", setValue: () => {} });
+
+export function Tabs({ defaultValue = "", value: controlled, onValueChange, className, children, ...props }: React.HTMLAttributes<HTMLDivElement> & { defaultValue?: string; value?: string; onValueChange?: (v: string) => void }) {
+  const [internal, setInternal] = React.useState(defaultValue);
+  const value = controlled ?? internal;
+  const setValue = (v: string) => { setInternal(v); onValueChange?.(v); };
+  return (
+    <TabsContext.Provider value={{ value, setValue }}>
+      <div className={cn("w-full", className)} {...props}>{children}</div>
+    </TabsContext.Provider>
+  );
+}
+
+export function TabsList({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("inline-flex items-center justify-center rounded-lg bg-slate-100 p-1", className)} {...props} />;
+}
+
+export function TabsTrigger({ value, className, children, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement> & { value: string }) {
+  const ctx = React.useContext(TabsContext);
+  const active = ctx.value === value;
+  return (
+    <button
+      type="button"
+      onClick={() => ctx.setValue(value)}
+      className={cn(
+        "inline-flex items-center justify-center rounded-md px-3 py-1.5 text-sm font-medium transition-colors",
+        active ? "bg-white text-slate-950 shadow-sm" : "text-slate-500 hover:text-slate-900",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}
+
+export function TabsContent({ value, className, children, ...props }: React.HTMLAttributes<HTMLDivElement> & { value: string }) {
+  const ctx = React.useContext(TabsContext);
+  if (ctx.value !== value) return null;
+  return <div className={cn("mt-2", className)} {...props}>{children}</div>;
+}
+
+export default Tabs;