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