Leon4gr45/builder

1'use client';2 3import * as React from 'react';4import * as TabsPrimitive from '@radix-ui/react-tabs';5 6import { cn } from '@/lib/utils';7 8const Tabs = TabsPrimitive.Root;9 10const TabsList = React.forwardRef<11  React.ElementRef<typeof TabsPrimitive.List>,12  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>13>(({ className, ...props }, ref) => (14  <TabsPrimitive.List15    ref={ref}16    className={cn(17      'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',18      className19    )}20    {...props}21  />22));23TabsList.displayName = TabsPrimitive.List.displayName;24 25const TabsTrigger = React.forwardRef<26  React.ElementRef<typeof TabsPrimitive.Trigger>,27  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>28>(({ className, ...props }, ref) => (29  <TabsPrimitive.Trigger30    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      className34    )}35    {...props}36  />37));38TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;39 40const TabsContent = React.forwardRef<41  React.ElementRef<typeof TabsPrimitive.Content>,42  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>43>(({ className, ...props }, ref) => (44  <TabsPrimitive.Content45    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      className49    )}50    {...props}51  />52));53TabsContent.displayName = TabsPrimitive.Content.displayName;54 55export { Tabs, TabsList, TabsTrigger, TabsContent };56