spb/fetcha

1"use client";2import * as React from "react";3import * as TabsPrimitive from "@radix-ui/react-tabs";4import { cn } from "@/lib/utils";56export const Tabs = TabsPrimitive.Root;78export const TabsList = React.forwardRef<React.ElementRef<typeof TabsPrimitive.List>, React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & { variant?: "pill" | "underline" }>(9  ({ className, variant = "pill", ...props }, ref) => (10    <TabsPrimitive.List11      ref={ref}12      className={cn(13        variant === "pill"14          ? "inline-flex h-9 items-center gap-0.5 rounded-md bg-bg-muted p-1 text-fg-muted"15          : "flex items-center gap-4 border-b border-border text-fg-muted overflow-x-auto no-scrollbar",16        className,17      )}18      data-variant={variant}19      {...props}20    />21  ),22);23TabsList.displayName = "TabsList";2425export const TabsTrigger = React.forwardRef<React.ElementRef<typeof TabsPrimitive.Trigger>, React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>>(({ className, ...props }, ref) => (26  <TabsPrimitive.Trigger27    ref={ref}28    className={cn(29      "inline-flex items-center justify-center gap-1.5 whitespace-nowrap text-[13px] font-medium transition-all disabled:pointer-events-none disabled:opacity-50",30      "[[data-variant=pill]_&]:rounded-[5px] [[data-variant=pill]_&]:px-3 [[data-variant=pill]_&]:h-7 [[data-variant=pill]_&]:data-[state=active]:bg-bg [[data-variant=pill]_&]:data-[state=active]:text-fg [[data-variant=pill]_&]:data-[state=active]:shadow-xs",31      "[[data-variant=underline]_&]:-mb-px [[data-variant=underline]_&]:border-b-2 [[data-variant=underline]_&]:border-transparent [[data-variant=underline]_&]:pb-2.5 [[data-variant=underline]_&]:pt-1 [[data-variant=underline]_&]:data-[state=active]:border-fg [[data-variant=underline]_&]:data-[state=active]:text-fg hover:text-fg",32      className,33    )}34    {...props}35  />36));37TabsTrigger.displayName = "TabsTrigger";3839export const TabsContent = React.forwardRef<React.ElementRef<typeof TabsPrimitive.Content>, React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>>(({ className, ...props }, ref) => (40  <TabsPrimitive.Content ref={ref} className={cn("mt-4 focus-visible:outline-none", className)} {...props} />41));42TabsContent.displayName = "TabsContent";43