tabs

1"use client"
2 
3import * as React from "react"
4import * as TabsPrimitive from "@radix-ui/react-tabs"
5 
6import { cn } from "@/lib/utils"
7 
8const Tabs = TabsPrimitive.Root
9 
10const 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))
23TabsList.displayName = TabsPrimitive.List.displayName
24 
25const 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))
38TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
39 
40const 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))
53TabsContent.displayName = TabsPrimitive.Content.displayName
54 
55export { Tabs, TabsList, TabsTrigger, TabsContent }