Scrapboard.org client
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 }