|
1
|
import React from "react"; |
|
2
|
import * as TabsPrimitive from "@radix-ui/react-tabs"; |
|
3
|
import { cn } from "@/lib/utils"; |
|
4
|
|
|
5
|
const Tabs = TabsPrimitive.Root; |
|
6
|
|
|
7
|
const TabsList = React.forwardRef< |
|
8
|
React.ElementRef<typeof TabsPrimitive.List>, |
|
9
|
React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> |
|
10
|
>(({ className, ...props }, ref) => ( |
|
11
|
<TabsPrimitive.List |
|
12
|
ref={ref} |
|
13
|
className={cn( |
|
14
|
"inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground", |
|
15
|
className |
|
16
|
)} |
|
17
|
{...props} |
|
18
|
/> |
|
19
|
)); |
|
20
|
TabsList.displayName = TabsPrimitive.List.displayName; |
|
21
|
|
|
22
|
const TabsTrigger = React.forwardRef< |
|
23
|
React.ElementRef<typeof TabsPrimitive.Trigger>, |
|
24
|
React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> |
|
25
|
>(({ className, ...props }, ref) => ( |
|
26
|
<TabsPrimitive.Trigger |
|
27
|
ref={ref} |
|
28
|
className={cn( |
|
29
|
"inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 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-sm", |
|
30
|
className |
|
31
|
)} |
|
32
|
{...props} |
|
33
|
/> |
|
34
|
)); |
|
35
|
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName; |
|
36
|
|
|
37
|
const TabsContent = React.forwardRef< |
|
38
|
React.ElementRef<typeof TabsPrimitive.Content>, |
|
39
|
React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content> |
|
40
|
>(({ className, ...props }, ref) => ( |
|
41
|
<TabsPrimitive.Content |
|
42
|
ref={ref} |
|
43
|
className={cn( |
|
44
|
"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", |
|
45
|
className |
|
46
|
)} |
|
47
|
{...props} |
|
48
|
/> |
|
49
|
)); |
|
50
|
TabsContent.displayName = TabsPrimitive.Content.displayName; |
|
51
|
|
|
52
|
export { Tabs, TabsList, TabsTrigger, TabsContent }; |