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

0% Statements 0/7
100% Branches 0/0
0% Functions 0/4
0% Lines 0/4

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
    64
    65
    66
    67

     "use client"

    import * as React from "react"
    import * as TabsPrimitive from "@radix-ui/react-tabs"

    import { cn } from "@/lib/utils"

    function Tabs({
      className,
      ...props
    }: React.ComponentProps<typeof TabsPrimitive.Root>) {
      return (
        <TabsPrimitive.Root
          data-slot="tabs"
          className={cn("flex flex-col gap-2", className)}
          {...props}
        />
      )
    }

    function TabsList({
      className,
      ...props
    }: React.ComponentProps<typeof TabsPrimitive.List>) {
      return (
        <TabsPrimitive.List
          data-slot="tabs-list"
          className={cn(
            "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
            className
          )}
          {...props}
        />
      )
    }

    function TabsTrigger({
      className,
      ...props
    }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
      return (
        <TabsPrimitive.Trigger
          data-slot="tabs-trigger"
          className={cn(
            "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
            className
          )}
          {...props}
        />
      )
    }

    function TabsContent({
      className,
      ...props
    }: React.ComponentProps<typeof TabsPrimitive.Content>) {
      return (
        <TabsPrimitive.Content
          data-slot="tabs-content"
          className={cn("flex-1 outline-none", className)}
          {...props}
        />
      )
    }

    export { Tabs, TabsList, TabsTrigger, TabsContent }