Alert

1"use client"
2 
3import * as React from "react"
4import { Alert as BaseAlert, AlertDescription, AlertTitle } from "@/components/ui/alert"
5import { cn } from "@/lib/utils"
6import { hoverEffects, type HoverEffect } from "@/lib/hover-effects"
7 
8export interface AlertProps extends React.ComponentProps<typeof BaseAlert> {
9  glow?: boolean
10  hover?: HoverEffect
11}
12 
13/**
14 * Glass UI Alert - Enhanced alert with glassy effects and hover animations
15 * 
16 * @example
17 * ```tsx
18 * <Alert variant="glass" hover="glow">
19 *   <AlertTitle>Heads up!</AlertTitle>
20 *   <AlertDescription>You have new notifications</AlertDescription>
21 * </Alert>
22 * ```
23 */
24export const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
25  ({ className, variant = "glass", glow = false, hover = "none", ...props }, ref) => {
26    return (
27      <BaseAlert
28        ref={ref}
29        variant={variant}
30        className={cn(
31          "relative overflow-hidden",
32          glow && "shadow-lg shadow-purple-500/20",
33          "transition-all duration-200",
34          hoverEffects({ hover }),
35          className
36        )}
37        {...props}
38      />
39    )
40  }
41)
42Alert.displayName = "Alert"
43 
44export {
45  AlertDescription,
46  AlertTitle,
47}
48