1
5import * as React from "react";
6import * as RadixTabs from "@radix-ui/react-tabs";
7import { clsx } from "clsx";
8
9export const Tabs = RadixTabs.Root;
10export const TabsContent = React.forwardRef<
11 React.ElementRef<typeof RadixTabs.Content>,
12 React.ComponentPropsWithoutRef<typeof RadixTabs.Content>
13>(({ className, value, ...props }, ref) => (
14 <RadixTabs.Content ref={ref} value={value} className={clsx("mt-3 focus:outline-none", className)} {...props} />
15));
16TabsContent.displayName = "TabsContent";
17
18export const TabsList = React.forwardRef<
19 React.ElementRef<typeof RadixTabs.List>,
20 React.ComponentPropsWithoutRef<typeof RadixTabs.List>
21>(({ className, ...props }, ref) => (
22 <RadixTabs.List
23 ref={ref}
24 className={clsx("inline-flex items-center gap-1 rounded-md bg-secondary p-1", className)}
25 {...props}
26 />
27));
28TabsList.displayName = "TabsList";
29
30export const TabsTrigger = React.forwardRef<
31 React.ElementRef<typeof RadixTabs.Trigger>,
32 React.ComponentPropsWithoutRef<typeof RadixTabs.Trigger>
33>(({ className, value, ...props }, ref) => (
34 <RadixTabs.Trigger
35 ref={ref}
36 value={value}
37 className={clsx(
38 "cursor-pointer rounded-sm px-3 py-1.5 text-sm font-medium text-muted-foreground",
39 "transition-colors focus-visible:outline-2 focus-visible:outline-ring",
40 "data-[state=active]:bg-card data-[state=active]:text-foreground data-[state=active]:shadow-sm",
41 className,
42 )}
43 {...props}
44 />
45));
46TabsTrigger.displayName = "TabsTrigger";
47