SPB Git

Repository Public

tabs.tsx 1.1 KB 25 lines tsx

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
Files main
Menu

Theme