Repository Public
1'use client';2import * as React from 'react';3import * as T from '@radix-ui/react-tabs';4import { cn } from '@/lib/cn';56export const Tabs = T.Root;7export function TabsList({ className, ...props }: React.ComponentProps<typeof T.List>) {8 return <T.List className={cn('no-scrollbar flex items-center gap-0.5 overflow-x-auto border-b border-line px-2', className)} {...props} />;9}10export function TabsTrigger({ className, ...props }: React.ComponentProps<typeof T.Trigger>) {11 return (12 <T.Trigger13 className={cn(14 'relative h-9 shrink-0 px-2.5 text-xs font-medium text-muted transition-colors hover:text-text-2 data-[state=active]:text-text pointer-coarse:h-11 pointer-coarse:px-3.5 pointer-coarse:text-sm',15 'after:absolute after:inset-x-2 after:bottom-0 after:h-px after:bg-transparent data-[state=active]:after:bg-accent',16 className,17 )}18 {...props}19 />20 );21}22export function TabsContent({ className, ...props }: React.ComponentProps<typeof T.Content>) {23 return <T.Content className={cn('min-h-0 flex-1 focus-visible:outline-none', className)} {...props} />;24}25