MicroClub Tabs

1'use client';
2 
3import { Tabs as TabsPrimitive } from '@base-ui/react/tabs';
4import { cva, type VariantProps } from 'class-variance-authority';
5import { cn } from '@/lib/utils';
6 
7const McTabsListVariants = cva('flex bg-muted rounded-lg p-[3px] size-fit', {
8  variants: {
9    variant: {
10      horizontal: 'flex-row',
11      vertical: 'flex-col',
12    },
13  },
14  defaultVariants: {
15    variant: 'horizontal',
16  },
17});
18 
19function McTabs({ ...props }: TabsPrimitive.Root.Props) {
20  return <TabsPrimitive.Root data-slot="tabs" {...props} />;
21}
22 
23function McTabsList({
24  className,
25  variant,
26  ...props
27}: TabsPrimitive.List.Props & VariantProps<typeof McTabsListVariants>) {
28  return (
29    <TabsPrimitive.List
30      data-slot="tabs-list"
31      className={cn(McTabsListVariants({ variant }), className)}
32      {...props}
33    />
34  );
35}
36 
37function McTabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
38  return (
39    <TabsPrimitive.Tab
40      data-slot="tabs-trigger"
41      className={cn(
42        'flex flex-col items-center justify-center min-h-7 min-w-19.5 px-2 py-1 rounded-md text-[14px] gap-2.5 paragraph-sm font-medium text-muted-foreground bg-transparent',
43        'data-active:bg-accent',
44        'data-active:ring-1 data-active:ring-inset data-active:ring-border',
45        'data-active:text-accent-foreground',
46        className
47      )}
48      {...props}
49    />
50  );
51}
52 
53export { McTabs, McTabsList, McTabsTrigger };