Tabs

1import * as React from 'react';
2 
3import {
4  Tabs as TabsPrimitive,
5  TabsList as TabsListPrimitive,
6  TabsTrigger as TabsTriggerPrimitive,
7  TabsContent as TabsContentPrimitive,
8  TabsContents as TabsContentsPrimitive,
9  TabsHighlight as TabsHighlightPrimitive,
10  TabsHighlightItem as TabsHighlightItemPrimitive,
11  type TabsProps as TabsPrimitiveProps,
12  type TabsListProps as TabsListPrimitiveProps,
13  type TabsTriggerProps as TabsTriggerPrimitiveProps,
14  type TabsContentProps as TabsContentPrimitiveProps,
15  type TabsContentsProps as TabsContentsPrimitiveProps,
16} from '@/components/animate-ui/primitives/animate/tabs';
17import { cn } from '@/lib/utils';
18 
19type TabsProps = TabsPrimitiveProps;
20 
21function Tabs({ className, ...props }: TabsProps) {
22  return (
23    <TabsPrimitive
24      className={cn('flex flex-col gap-2', className)}
25      {...props}
26    />
27  );
28}
29 
30type TabsListProps = TabsListPrimitiveProps;
31 
32function TabsList({ className, ...props }: TabsListProps) {
33  return (
34    <TabsHighlightPrimitive className="absolute z-0 inset-0 border border-transparent rounded-md bg-background dark:border-input dark:bg-input/30 shadow-sm">
35      <TabsListPrimitive
36        className={cn(
37          'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',
38          className,
39        )}
40        {...props}
41      />
42    </TabsHighlightPrimitive>
43  );
44}
45 
46type TabsTriggerProps = TabsTriggerPrimitiveProps;
47 
48function TabsTrigger({ className, ...props }: TabsTriggerProps) {
49  return (
50    <TabsHighlightItemPrimitive value={props.value} className="flex-1">
51      <TabsTriggerPrimitive
52        className={cn(
53          "data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md w-full px-2 py-1 text-sm font-medium whitespace-nowrap transition-colors duration-500 ease-in-out focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
54          className,
55        )}
56        {...props}
57      />
58    </TabsHighlightItemPrimitive>
59  );
60}
61 
62type TabsContentsProps = TabsContentsPrimitiveProps;
63 
64function TabsContents(props: TabsContentsProps) {
65  return <TabsContentsPrimitive {...props} />;
66}
67 
68type TabsContentProps = TabsContentPrimitiveProps;
69 
70// … truncated