|
1
|
import * as React from "react" |
|
2
|
import { cva, type VariantProps } from "class-variance-authority" |
|
3
|
|
|
4
|
import { cn } from "@/lib/utils" |
|
5
|
|
|
6
|
const alertVariants = cva( |
|
7
|
"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", |
|
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
|
|
|
22
|
const 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
|
)) |
|
33
|
Alert.displayName = "Alert" |
|
34
|
|
|
35
|
const 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
|
)) |
|
45
|
AlertTitle.displayName = "AlertTitle" |
|
46
|
|
|
47
|
const 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
|
)) |
|
57
|
AlertDescription.displayName = "AlertDescription" |
|
58
|
|
|
59
|
export { Alert, AlertTitle, AlertDescription } |