| 'use client' |
|
|
| import * as React from 'react' |
| import * as TabsPrimitive from '@radix-ui/react-tabs' |
| import { cn } from '@/utils/helpers' |
|
|
| const Tabs = TabsPrimitive.Root |
|
|
| const TabsList = React.forwardRef< |
| React.ElementRef<typeof TabsPrimitive.List>, |
| React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> |
| >(({ className, ...props }, ref) => ( |
| <TabsPrimitive.List |
| ref={ref} |
| className={cn( |
| 'inline-flex h-10 items-center justify-center rounded-md bg-gray-100 p-1 text-gray-500 dark:bg-gray-800 dark:text-gray-400', |
| className |
| )} |
| {...props} |
| /> |
| )) |
| TabsList.displayName = TabsPrimitive.List.displayName |
|
|
| const TabsTrigger = React.forwardRef< |
| React.ElementRef<typeof TabsPrimitive.Trigger>, |
| React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> |
| >(({ className, ...props }, ref) => ( |
| <TabsPrimitive.Trigger |
| ref={ref} |
| className={cn( |
| 'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-gray-900 data-[state=active]:shadow-sm dark:data-[state=active]:bg-gray-900 dark:data-[state=active]:text-white', |
| className |
| )} |
| {...props} |
| /> |
| )) |
| TabsTrigger.displayName = TabsPrimitive.Trigger.displayName |
|
|
| const TabsContent = React.forwardRef< |
| React.ElementRef<typeof TabsPrimitive.Content>, |
| React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content> |
| >(({ className, ...props }, ref) => ( |
| <TabsPrimitive.Content |
| ref={ref} |
| className={cn( |
| 'mt-2 ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 dark:ring-offset-gray-900', |
| className |
| )} |
| {...props} |
| /> |
| )) |
| TabsContent.displayName = TabsPrimitive.Content.displayName |
|
|
| export { Tabs, TabsList, TabsTrigger, TabsContent } |
|
|
