tabs

1"use client"
2
3import * as React from "react"
4import { Tabs as BaseTabs } from "@base-ui/react/tabs"
5import { cn } from "@/lib/utils"
6
7const Tabs = BaseTabs.Root
8
9type TabsListProps = React.ComponentPropsWithoutRef<typeof BaseTabs.List>
10
11const TabsList = React.forwardRef<
12    React.ComponentRef<typeof BaseTabs.List>,
13    TabsListProps
14>(({ className, ...props }, ref) => (
15    <BaseTabs.List
16        ref={ref}
17        className={cn(
18            "inline-flex items-center gap-1 rounded-base border-2 border-black bg-white p-1",
19            className
20        )}
21        {...props}
22    />
23))
24TabsList.displayName = "TabsList"
25
26type TabsTriggerProps = React.ComponentPropsWithoutRef<typeof BaseTabs.Tab>
27
28const TabsTrigger = React.forwardRef<
29    React.ComponentRef<typeof BaseTabs.Tab>,
30    TabsTriggerProps
31>(({ className, ...props }, ref) => (
32    <BaseTabs.Tab
33        ref={ref}
34        className={cn(
35            "inline-flex items-center justify-center whitespace-nowrap rounded-base px-4 py-2 text-sm font-bold transition-colors focus-brutal disabled:pointer-events-none disabled:opacity-50 data-active:border-2 data-active:border-black data-active:bg-main data-active:text-black data-[state=inactive]:bg-transparent data-[state=inactive]:hover:bg-main/50 text-black",
36            className
37        )}
38        {...props}
39    />
40))
41TabsTrigger.displayName = "TabsTrigger"
42
43type TabsContentProps = React.ComponentPropsWithoutRef<typeof BaseTabs.Panel>
44
45const TabsContent = React.forwardRef<
46    React.ComponentRef<typeof BaseTabs.Panel>,
47    TabsContentProps
48>(({ className, ...props }, ref) => (
49    <BaseTabs.Panel
50        ref={ref}
51        className={cn(
52            "mt-4 rounded-base border-2 border-black bg-white p-4 shadow-brutal focus-brutal text-black",
53            className
54        )}
55        {...props}
56    />
57))
58TabsContent.displayName = "TabsContent"
59
60export { Tabs, TabsList, TabsTrigger, TabsContent }