tabs

1"use client"
2
3import * as TabsPrimitive from "@radix-ui/react-tabs"
4
5import * as React from "react"
6
7import { cn } from "@/lib/utils"
8
9function Tabs({
10  className,
11  ...props
12}: React.ComponentProps<typeof TabsPrimitive.Root>) {
13  return (
14    <TabsPrimitive.Root
15      data-slot="tabs"
16      className={cn("w-full", className)}
17      {...props}
18    />
19  )
20}
21
22function TabsList({
23  className,
24  ...props
25}: React.ComponentProps<typeof TabsPrimitive.List>) {
26  return (
27    <TabsPrimitive.List
28      data-slot="tabs-list"
29      className={cn(
30        "inline-flex h-12 items-center justify-center rounded-base border-2 border-border bg-background p-1 text-foreground",
31        className,
32      )}
33      {...props}
34    />
35  )
36}
37
38function TabsTrigger({
39  className,
40  ...props
41}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
42  return (
43    <TabsPrimitive.Trigger
44      data-slot="tabs-trigger"
45      className={cn(
46        "inline-flex items-center justify-center whitespace-nowrap rounded-base border-2 border-transparent px-2 py-1 gap-1.5 text-sm font-heading ring-offset-white 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-main data-[state=active]:text-main-foreground data-[state=active]:border-border",
47        className,
48      )}
49      {...props}
50    />
51  )
52}
53
54function TabsContent({
55  className,
56  ...props
57}: React.ComponentProps<typeof TabsPrimitive.Content>) {
58  return (
59    <TabsPrimitive.Content
60      data-slot="tabs-content"
61      className={cn(
62        "mt-2 ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
63        className,
64      )}
65      {...props}
66    />
67  )
68}
69
70export { Tabs, TabsList, TabsTrigger, TabsContent }
71