Glass Notification

1"use client"
2 
3import * as React from "react"
4import { X, CheckCircle, AlertCircle, AlertTriangle, Info } from "lucide-react"
5import { cn } from "@/lib/utils"
6 
7type NotificationType = "success" | "error" | "warning" | "info"
8type NotificationPosition = "top-right" | "top-left" | "bottom-right" | "bottom-left" | "top-center" | "bottom-center"
9 
10interface Notification {
11  id: string
12  type: NotificationType
13  title: string
14  description?: string
15  duration?: number
16}
17 
18interface NotificationContextType {
19  notifications: Notification[]
20  addNotification: (notification: Omit<Notification, "id">) => void
21  removeNotification: (id: string) => void
22}
23 
24const NotificationContext = React.createContext<NotificationContextType | null>(null)
25 
26export function useNotification() {
27  const context = React.useContext(NotificationContext)
28  if (!context) {
29    throw new Error("useNotification must be used within a GlassNotificationProvider")
30  }
31  return context
32}
33 
34export function GlassNotificationProvider({
35  children,
36  position = "bottom-right",
37}: {
38  children: React.ReactNode
39  position?: NotificationPosition
40}) {
41  const [notifications, setNotifications] = React.useState<Notification[]>([])
42 
43  const addNotification = React.useCallback((notification: Omit<Notification, "id">) => {
44    const id = Math.random().toString(36).substring(2, 9)
45    setNotifications((prev) => [...prev, { ...notification, id }])
46 
47    if (notification.duration !== 0) {
48      setTimeout(() => {
49        setNotifications((prev) => prev.filter((n) => n.id !== id))
50      }, notification.duration || 5000)
51    }
52  }, [])
53 
54  const removeNotification = React.useCallback((id: string) => {
55    setNotifications((prev) => prev.filter((n) => n.id !== id))
56  }, [])
57 
58  return (
59    <NotificationContext.Provider value={{ notifications, addNotification, removeNotification }}>
60      {children}
61      <GlassNotificationContainer position={position} />
62    </NotificationContext.Provider>
63  )
64}
65 
66const typeConfig = {
67  success: {
68    icon: CheckCircle,
69    gradient: "from-emerald-500/30 to-green-500/30",
70    border: "border-emerald-400/30",
71    iconColor: "text-emerald-400",
72  },
73  error: {
74    icon: AlertCircle,
75    gradient: "from-red-500/30 to-rose-500/30",
76    border: "border-red-400/30",
77    iconColor: "text-red-400",
78  },
79  warning: {
80    icon: AlertTriangle,
81    gradient: "from-amber-500/30 to-yellow-500/30",
82    border: "border-amber-400/30",
83    iconColor: "text-amber-400",
84  },
85  info: {
86    icon: Info,
87// … truncated