1  "use client"
 2  
 3  import * as React from "react"
 4  import * as TabsPrimitive from "@radix-ui/react-tabs"
 5  
 6  import { cn } from "@/lib/utils"
 7  
 8  const Tabs = TabsPrimitive.Root
 9  
10  const TabsList = React.forwardRef<
11    React.ElementRef<typeof TabsPrimitive.List>,
12    React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
13  >(({ className, ...props }, ref) => (
14    <TabsPrimitive.List
15      ref={ref}
16      className={cn(
17        "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
18        className
19      )}
20      {...props}
21    />
22  ))
23  TabsList.displayName = TabsPrimitive.List.displayName
24  
25  const TabsTrigger = React.forwardRef<
26    React.ElementRef<typeof TabsPrimitive.Trigger>,
27    React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
28  >(({ className, ...props }, ref) => (
29    <TabsPrimitive.Trigger
30      ref={ref}
31      className={cn(
32        "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
33        className
34      )}
35      {...props}
36    />
37  ))
38  TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
39  
40  const TabsContent = React.forwardRef<
41    React.ElementRef<typeof TabsPrimitive.Content>,
42    React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
43  >(({ className, ...props }, ref) => (
44    <TabsPrimitive.Content
45      ref={ref}
46      className={cn(
47        "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
48        className
49      )}
50      {...props}
51    />
52  ))
53  TabsContent.displayName = TabsPrimitive.Content.displayName
54  
55  export { Tabs, TabsList, TabsTrigger, TabsContent }