Toast

1"use client"
2 
3import * as React from "react"
4import { XIcon } from "lucide-react"
5 
6import { cn } from "@/lib/utils"
7import { Alert, AlertDescription, AlertTitle } from "@/registry/aqua/ui/alert"
8 
9type ToastVariant = "default" | "warning" | "destructive"
10 
11export type ToastOptions = {
12  title: string
13  description?: string
14  variant?: ToastVariant
15  duration?: number
16}
17 
18type ToastItem = ToastOptions & {
19  id: number
20  leaving: boolean
21}
22 
23let toastCount = 0
24let toasts: ToastItem[] = []
25const listeners = new Set<(items: ToastItem[]) => void>()
26 
27function emit() {
28  for (const listener of listeners) listener(toasts)
29}
30 
31function subscribe(listener: (items: ToastItem[]) => void) {
32  listeners.add(listener)
33  return () => {
34    listeners.delete(listener)
35  }
36}
37 
38function getSnapshot() {
39  return toasts
40}
41 
42function toast(options: ToastOptions) {
43  const id = ++toastCount
44  toasts = [...toasts, { duration: 5000, ...options, id, leaving: false }]
45  emit()
46  return id
47}
48 
49function dismissToast(id: number) {
50  if (!toasts.some((item) => item.id === id && !item.leaving)) return
51  toasts = toasts.map((item) =>
52    item.id === id ? { ...item, leaving: true } : item
53  )
54  emit()
55  setTimeout(() => {
56    toasts = toasts.filter((item) => item.id !== id)
57    emit()
58  }, 200)
59}
60 
61function Toaster({ className }: { className?: string }) {
62  const items = React.useSyncExternalStore(subscribe, getSnapshot, getSnapshot)
63  const scheduled = React.useRef(new Set<number>())
64 
65  React.useEffect(() => {
66    for (const item of items) {
67      if (item.leaving || scheduled.current.has(item.id)) continue
68      scheduled.current.add(item.id)
69      setTimeout(() => dismissToast(item.id), item.duration)
70    }
71  }, [items])
72 
73  return (
74    <div
75      className={cn(
76        "pointer-events-none fixed right-4 top-4 z-[100] flex w-80 max-w-[calc(100vw-2rem)] flex-col gap-2.5",
77        className
78      )}
79    >
80      {items.map((item) => (
81        <Alert
82          key={item.id}
83          variant={item.variant}
84          className={cn(
85            "group pointer-events-auto relative shadow-[0_1px_3px_rgba(20,30,50,0.12),0_10px_28px_rgba(20,30,50,0.3)]",
86            item.leaving
87              ? "animate-out fade-out-0 slide-out-to-right-8 fill-mode-forwards duration-200"
88              : "animate-in fade-in-0 slide-in-from-right-8 duration-300"
89          )}
90        >
91          <AlertTitle>{item.title}</AlertTitle>
92          {item.description ? (
93// … truncated