tabs.tsx (1725B)
1 "use client" 2 3 import { Root, List, Trigger, Content } from "@radix-ui/react-tabs" 4 5 import { cn } from "@/lib/utils" 6 import { ComponentPropsWithoutRef, ComponentRef, forwardRef } from "react" 7 8 const Tabs = Root 9 10 const TabsList = forwardRef< 11 ComponentRef<typeof List>, 12 ComponentPropsWithoutRef<typeof List> 13 >(({ className, ...props }, ref) => ( 14 <List 15 ref={ref} 16 className={cn( 17 "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground", 18 className 19 )} 20 {...props} 21 /> 22 )) 23 TabsList.displayName = List.displayName 24 25 const TabsTrigger = forwardRef< 26 ComponentRef<typeof Trigger>, 27 ComponentPropsWithoutRef<typeof Trigger> 28 >(({ className, ...props }, ref) => ( 29 <Trigger 30 ref={ref} 31 className={cn( 32 "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm", 33 className 34 )} 35 {...props} 36 /> 37 )) 38 TabsTrigger.displayName = Trigger.displayName 39 40 const TabsContent = forwardRef< 41 ComponentRef<typeof Content>, 42 ComponentPropsWithoutRef<typeof Content> 43 >(({ className, ...props }, ref) => ( 44 <Content 45 ref={ref} 46 className={cn( 47 "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", 48 className 49 )} 50 {...props} 51 /> 52 )) 53 TabsContent.displayName = Content.displayName 54 55 export { Tabs, TabsList, TabsTrigger, TabsContent }