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

0% Statements 0/8
100% Branches 0/0
0% Functions 0/4
0% Lines 0/5

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 AccordionPrimitive from "@radix-ui/react-accordion"
    import { ChevronDown } from "lucide-react"

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

    function Accordion({
      ...props
    }: React.ComponentProps<typeof AccordionPrimitive.Root>) {
      return <AccordionPrimitive.Root data-slot="accordion" {...props} />
    }

    function AccordionItem({
      className,
      ...props
    }: React.ComponentProps<typeof AccordionPrimitive.Item>) {
      return (
        <AccordionPrimitive.Item
          data-slot="accordion-item"
          className={cn("border-b last:border-b-0", className)}
          {...props}
        />
      )
    }

    function AccordionTrigger({
      className,
      children,
      ...props
    }: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
      return (
        <AccordionPrimitive.Header className="flex">
          <AccordionPrimitive.Trigger
            data-slot="accordion-trigger"
            className={cn(
              "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
              className
            )}
            {...props}
          >
            {children}
            <ChevronDown className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
          </AccordionPrimitive.Trigger>
        </AccordionPrimitive.Header>
      )
    }

    function AccordionContent({
      className,
      children,
      ...props
    }: React.ComponentProps<typeof AccordionPrimitive.Content>) {
      return (
        <AccordionPrimitive.Content
          data-slot="accordion-content"
          className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
          {...props}
        >
          <div className={cn("pt-0 pb-4", className)}>{children}</div>
        </AccordionPrimitive.Content>
      )
    }

    export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }