tabs.tsx

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 }
56