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 items-center", 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        "z-10 -mb-[14px] inline-flex rounded-full shadow-[0_1px_3px_rgba(20,30,50,0.25)]",
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        "relative -ml-px border border-[#8b909a] bg-[linear-gradient(180deg,#fdfdfe_0%,#e4e7ec_48%,#d3d7de_52%,#eceef2_100%)] px-5 py-[5px] text-[13px] text-[#3a3f47] shadow-[inset_0_1px_0_rgba(255,255,255,0.9)] outline-none transition-[filter] first:ml-0 first:rounded-l-full last:rounded-r-full hover:brightness-103 focus-visible:z-10 focus-visible:ring-[3px] focus-visible:ring-[var(--aqua-ring,#6cb0f7)]/70 active:brightness-95 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:border-[var(--aqua-edge,#1c5fb8)] data-[state=active]:bg-[linear-gradient(180deg,var(--aqua-gel-hi,#a8d0f7)_0%,var(--aqua-gel-mid,#4a90ec)_50%,var(--aqua-gel-deep,#2a6fd0)_51%,var(--aqua-gel-light,#6aabf3)_100%)] data-[state=active]:text-white data-[state=active]:shadow-[inset_0_2px_4px_rgba(10,40,90,0.35),inset_0_1px_0_rgba(255,255,255,0.4)] data-[state=active]:[text-shadow:0_-1px_1px_rgba(10,40,90,0.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(
61        "w-full rounded-lg border border-[#a9adb5] bg-[repeating-linear-gradient(180deg,#f4f6fa_0px,#f4f6fa_2px,#eaeef4_2px,#eaeef4_4px)] p-6 pt-8 shadow-[inset_0_1px_4px_rgba(20,30,50,0.12)] outline-none",
62        className
63      )}
64      {...props}
65    />
66  )
67}
68 
69export { Tabs, TabsList, TabsTrigger, TabsContent }