|
1
|
import { useToast } from "@/hooks/use-toast" |
|
2
|
import { |
|
3
|
Toast, |
|
4
|
ToastClose, |
|
5
|
ToastDescription, |
|
6
|
ToastProvider, |
|
7
|
ToastTitle, |
|
8
|
ToastViewport, |
|
9
|
} from "@/components/ui/toast" |
|
10
|
|
|
11
|
export function Toaster() { |
|
12
|
const { toasts } = useToast() |
|
13
|
|
|
14
|
return ( |
|
15
|
<ToastProvider> |
|
16
|
{toasts.map(function ({ id, title, description, action, ...props }) { |
|
17
|
return ( |
|
18
|
<Toast key={id} {...props}> |
|
19
|
<div className="grid gap-1"> |
|
20
|
{title && <ToastTitle>{title}</ToastTitle>} |
|
21
|
{description && ( |
|
22
|
<ToastDescription>{description}</ToastDescription> |
|
23
|
)} |
|
24
|
</div> |
|
25
|
{action} |
|
26
|
<ToastClose /> |
|
27
|
</Toast> |
|
28
|
) |
|
29
|
})} |
|
30
|
<ToastViewport /> |
|
31
|
</ToastProvider> |
|
32
|
) |
|
33
|
} |