import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" import { AlertTriangle, Info, CheckCircle2, AlertCircle } from "lucide-react" const alertVariants = cva( "relative flex w-full items-start gap-3 rounded-2xl border-1 border-white/30 bg-white/10 backdrop-blur-md p-4 shadow-lg ring-1 ring-black/5", { variants: { variant: { default: "", destructive: "border-destructive/30 bg-destructive/10 ring-destructive/10 text-destructive", warning: "border-amber-500/30 bg-amber-500/10 ring-amber-500/10 text-amber-600 dark:text-amber-400", success: "border-emerald-500/30 bg-emerald-500/10 ring-emerald-500/10 text-emerald-600 dark:text-emerald-400", }, }, defaultVariants: { variant: "default", }, } ) const iconMap = { default: Info, destructive: AlertCircle, warning: AlertTriangle, success: CheckCircle2, } as const interface AlertProps extends React.HTMLAttributes, VariantProps {} const Alert = React.forwardRef( ({ className, variant = "default", children, ...props }, ref) => { const Icon = iconMap[variant ?? "default"] return (

{children}

) } ) Alert.displayName = "Alert" const AlertTitle = React.forwardRef>( ({ className, ...props }, ref) => (

) ) AlertTitle.displayName = "AlertTitle" const AlertDescription = React.forwardRef>( ({ className, ...props }, ref) => (
) ) AlertDescription.displayName = "AlertDescription" export { Alert, AlertTitle, AlertDescription, alertVariants }

) ) AlertTitle.displayName = "AlertTitle" const AlertDescription = React.forwardRef>( ({ className, ...props }, ref) => ( ) ) AlertDescription.displayName = "AlertDescription" export { Alert, AlertTitle, AlertDescription, alertVariants }

) ) AlertTitle.displayName = "AlertTitle" const AlertDescription = React.forwardRef>( ({ className, ...props }, ref) => (
) ) AlertDescription.displayName = "AlertDescription" export { Alert, AlertTitle, AlertDescription, alertVariants }

Alert

Note

Error