alert

1import * as React from "react"
2import { cva, type VariantProps } from "class-variance-authority"
3 
4import { cn } from "@/lib/utils"
5 
6const alertVariants = cva(
7  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
8  {
9    variants: {
10      variant: {
11        default: "bg-background text-foreground",
12        destructive:
13          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
14      },
15    },
16    defaultVariants: {
17      variant: "default",
18    },
19  }
20)
21 
22const Alert = React.forwardRef<
23  HTMLDivElement,
24  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
25>(({ className, variant, ...props }, ref) => (
26  <div
27    ref={ref}
28    role="alert"
29    className={cn(alertVariants({ variant }), className)}
30    {...props}
31  />
32))
33Alert.displayName = "Alert"
34 
35const AlertTitle = React.forwardRef<
36  HTMLParagraphElement,
37  React.HTMLAttributes<HTMLHeadingElement>
38>(({ className, ...props }, ref) => (
39  <h5
40    ref={ref}
41    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
42    {...props}
43  />
44))
45AlertTitle.displayName = "AlertTitle"
46 
47const AlertDescription = React.forwardRef<
48  HTMLParagraphElement,
49  React.HTMLAttributes<HTMLParagraphElement>
50>(({ className, ...props }, ref) => (
51  <div
52    ref={ref}
53    className={cn("text-sm [&_p]:leading-relaxed", className)}
54    {...props}
55  />
56))
57AlertDescription.displayName = "AlertDescription"
58 
59export { Alert, AlertTitle, AlertDescription }