tabs

1"use client";
2 
3import { motion } from "motion/react";
4import { Tabs as TabsPrimitive } from "radix-ui";
5import * as React from "react";
6import { Pane } from "@/components/ui/pane";
7import { GLASS_SPRING } from "@/lib/glass/config";
8import { cn } from "@/lib/utils";
9 
10interface TabsContextValue {
11  value?: string;
12  indicatorId: string;
13}
14 
15const TabsContext = React.createContext<TabsContextValue | null>(null);
16 
17function Tabs({
18  value,
19  defaultValue,
20  onValueChange,
21  className,
22  ...props
23}: React.ComponentProps<typeof TabsPrimitive.Root>) {
24  const indicatorId = React.useId();
25  const [internalValue, setInternalValue] = React.useState(defaultValue);
26  const activeValue = value ?? internalValue;
27 
28  return (
29    <TabsContext.Provider value={{ value: activeValue, indicatorId }}>
30      <TabsPrimitive.Root
31        value={value}
32        defaultValue={defaultValue}
33        onValueChange={(next) => {
34          setInternalValue(next);
35          onValueChange?.(next);
36        }}
37        data-slot="tabs"
38        className={cn("flex flex-col gap-2", className)}
39        {...props}
40      />
41    </TabsContext.Provider>
42  );
43}
44 
45function TabsList({
46  className,
47  ...props
48}: React.ComponentProps<typeof TabsPrimitive.List>) {
49  return (
50    <Pane variant="clear" radius={16} className="inline-flex w-fit">
51      <TabsPrimitive.List
52        data-slot="tabs-list"
53        className={cn(
54          "relative inline-flex h-10 items-center gap-1 p-1",
55          className,
56        )}
57        {...props}
58      />
59    </Pane>
60  );
61}
62 
63function TabsTrigger({
64  className,
65  value,
66  children,
67  ...props
68}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
69  const ctx = React.useContext(TabsContext);
70  const isActive = ctx?.value === value;
71 
72  return (
73    <TabsPrimitive.Trigger
74      value={value}
75      data-slot="tabs-trigger"
76      className={cn(
77        "relative inline-flex h-8 flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-xl px-3 text-sm font-medium text-muted-foreground outline-none transition-colors focus-visible:ring-2 focus-visible:ring-[var(--pane-highlight)] disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-foreground [&_svg]:size-4 [&_svg]:shrink-0",
78        className,
79      )}
80      {...props}
81    >
82      {isActive ? (
83        <motion.div
84          layoutId={`${ctx?.indicatorId}-indicator`}
85          transition={GLASS_SPRING.hover}
86          className="absolute inset-0"
87        >
88// … truncated