|
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 } |
|
|