tabs

1"use client"
2 
3import { cn } from "@/lib/utils"
4import * as TabsPrimitive from "@radix-ui/react-tabs"
5import * as React from "react"
6 
7function Tabs({
8  className,
9  ...props
10}: React.ComponentProps<typeof TabsPrimitive.Root>) {
11  return (
12    <TabsPrimitive.Root
13      data-slot="tabs"
14      className={cn("flex flex-col gap-2", className)}
15      {...props}
16    />
17  )
18}
19 
20function TabsList({
21  className,
22  ...props
23}: React.ComponentProps<typeof TabsPrimitive.List>) {
24  return (
25    <TabsPrimitive.List
26      data-slot="tabs-list"
27      className={cn(
28        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-1",
29        className,
30      )}
31      {...props}
32    />
33  )
34}
35 
36function TabsTrigger({
37  className,
38  ...props
39}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
40  return (
41    <TabsPrimitive.Trigger
42      data-slot="tabs-trigger"
43      className={cn(
44        "data-[state=active]:bg-background data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring inline-flex items-center justify-center gap-2 rounded-md px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
45        className,
46      )}
47      {...props}
48    />
49  )
50}
51 
52function TabsContent({
53  className,
54  ...props
55}: React.ComponentProps<typeof TabsPrimitive.Content>) {
56  return (
57    <TabsPrimitive.Content
58      data-slot="tabs-content"
59      className={cn("flex-1 outline-none", className)}
60      {...props}
61    />
62  )
63}
64 
65export { Tabs, TabsList, TabsTrigger, TabsContent }