| import * as React from 'react' | |
| import { cva, type VariantProps } from 'class-variance-authority' | |
| import { cn } from '@/lib/utils' | |
| const alertVariants = cva( | |
| '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', | |
| { | |
| variants: { | |
| variant: { | |
| default: 'bg-background text-foreground', | |
| destructive: | |
| 'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive' | |
| } | |
| }, | |
| defaultVariants: { | |
| variant: 'default' | |
| } | |
| } | |
| ) | |
| const Alert = React.forwardRef< | |
| HTMLDivElement, | |
| React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants> | |
| >(({ className, variant, ...props }, ref) => ( | |
| <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} /> | |
| )) | |
| Alert.displayName = 'Alert' | |
| const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>( | |
| ({ className, ...props }, ref) => ( | |
| <h5 | |
| ref={ref} | |
| className={cn('mb-1 leading-none font-medium tracking-tight', className)} | |
| {...props} | |
| /> | |
| ) | |
| ) | |
| AlertTitle.displayName = 'AlertTitle' | |
| const AlertDescription = React.forwardRef< | |
| HTMLParagraphElement, | |
| React.HTMLAttributes<HTMLParagraphElement> | |
| >(({ className, ...props }, ref) => ( | |
| <div ref={ref} className={cn('text-sm [&_p]:leading-relaxed', className)} {...props} /> | |
| )) | |
| AlertDescription.displayName = 'AlertDescription' | |
| export { Alert, AlertTitle, AlertDescription } | |