openstatus.dev
Openstatus
www.openstatus.dev
1"use client";
2
3import * as TabsPrimitive from "@radix-ui/react-tabs";
4import type * as React from "react";
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 "inline-flex h-9 w-fit items-center justify-center rounded-lg bg-muted p-[3px] text-muted-foreground",
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 "inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-2 py-1 font-medium text-foreground text-sm transition-[color,box-shadow] focus-visible:border-ring focus-visible:outline-1 focus-visible:outline-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:shadow-sm dark:text-muted-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
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 };