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 
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("border-border inline-flex items-center gap-0 border-b", className)}
17    {...props}
18  />
19));
20TabsList.displayName = TabsPrimitive.List.displayName;
21 
22const TabsTrigger = React.forwardRef<
23  React.ElementRef<typeof TabsPrimitive.Trigger>,
24  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
25>(({ className, ...props }, ref) => (
26  <TabsPrimitive.Trigger
27    ref={ref}
28    className={cn(
29      "inline-flex items-center justify-center px-3 py-2 whitespace-nowrap",
30      "text-mono text-[11px] tracking-[0.08em] uppercase",
31      "text-foreground-muted -mb-px border-b-2 border-transparent",
32      "hover:text-foreground transition-colors",
33      "focus-visible:text-foreground focus-visible:outline-none",
34      "data-[state=active]:text-primary data-[state=active]:border-primary",
35      "disabled:pointer-events-none disabled:opacity-50",
36      className,
37    )}
38    {...props}
39  />
40));
41TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
42 
43const TabsContent = React.forwardRef<
44  React.ElementRef<typeof TabsPrimitive.Content>,
45  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
46>(({ className, ...props }, ref) => (
47  <TabsPrimitive.Content
48    ref={ref}
49    className={cn(
50      "focus-visible:ring-ring mt-3 focus-visible:ring-2 focus-visible:outline-none",
51      className,
52    )}
53    {...props}
54  />
55));
56TabsContent.displayName = TabsPrimitive.Content.displayName;
57 
58export { Tabs, TabsList, TabsTrigger, TabsContent };