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

100% Statements 56/56
100% Branches 3/3
100% Functions 3/3
100% Lines 56/56

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
    571x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    24x
    24x
    24x
    24x
    24x
    24x
    24x
    24x
    24x
    24x
    24x
    24x
    24x
    24x
    1x
    24x
    24x
    24x
    24x
    24x
    24x
    24x
    24x
    24x
    1x
    24x
    24x
    24x
    24x
    24x
    24x
    24x
    24x
    24x
    1x
    1x
     import { ComponentProps } from "react"
    import { cva, type VariantProps } from "class-variance-authority"
    import { cn } from "@/lib/utils"

    const alertVariants = cva(
      "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
      {
        variants: {
          variant: {
            default: "bg-background text-foreground",
            destructive:
              "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
          },
        },
        defaultVariants: {
          variant: "default",
        },
      }
    )

    function Alert({
      className,
      variant,
      ...props
    }: ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
      return (
        <div
          role="alert"
          data-slot="alert"
          className={cn(alertVariants({ variant }), className)}
          {...props}
        />
      )
    }

    function AlertTitle({ className, ...props }: ComponentProps<"h5">) {
      return (
        <h5
          data-slot="alert-title"
          className={cn("mb-1 font-medium leading-none tracking-tight", className)}
          {...props}
        />
      )
    }

    function AlertDescription({ className, ...props }: ComponentProps<"div">) {
      return (
        <div
          data-slot="alert-description"
          className={cn("text-sm [&_p]:leading-relaxed", className)}
          {...props}
        />
      )
    }

    export { Alert, AlertTitle, AlertDescription }