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