All files / client/src/components/ui tabs.tsx

100% Statements 10/10
100% Branches 0/0
100% Functions 3/3
100% Lines 10/10

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63            5x   5x       75x                   5x             5x   154x                         5x   5x       158x                 5x      
import * as React from "react";
import * as TabsPrimitive from "@radix-ui/react-tabs";
 
import { AppTab } from "@/components/ui/app-tab";
import { cn } from "@/lib/utils";
 
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(
      // Keep defaults minimal; let callers control spacing/scroll/background
      "flex items-center justify-start gap-2 rounded-none",
      className,
    )}
    {...props}
  />
));
TabsList.displayName = TabsPrimitive.List.displayName;
 
type TabsTriggerProps = Omit<
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>,
  "asChild"
>;
 
const TabsTrigger = React.forwardRef<HTMLDivElement, TabsTriggerProps>(
  ({ className, children, ...props }, ref) => (
    <TabsPrimitive.Trigger asChild {...props}>
      <AppTab
        ref={ref}
        className={cn(
          "justify-center whitespace-nowrap disabled:pointer-events-none disabled:opacity-50",
          className,
        )}
      >
        {children}
      </AppTab>
    </TabsPrimitive.Trigger>
  ),
);
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-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
      className,
    )}
    {...props}
  />
));
TabsContent.displayName = TabsPrimitive.Content.displayName;
 
export { Tabs, TabsList, TabsTrigger, TabsContent };