Tabs

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