alert.tsx (1567B)
1 import { cva, type VariantProps } from "class-variance-authority" 2 3 import { cn } from "@/lib/utils" 4 import { forwardRef, HTMLAttributes } from "react" 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 = forwardRef< 23 HTMLDivElement, 24 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 = forwardRef< 36 HTMLParagraphElement, 37 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 = forwardRef< 48 HTMLParagraphElement, 49 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 }