pangolin/src/components/ui/toaster.tsx

"use client";

import { useToast } from "@/hooks/useToast";
import {
    Toast,
    ToastClose,
    ToastDescription,
    ToastProvider,
    ToastTitle,
    ToastViewport
} from "@/components/ui/toast";
import { useEnvContext } from "@app/hooks/useEnvContext";

export function Toaster() {
    const { toasts } = useToast();

    const { env } = useEnvContext();

    return (
        <ToastProvider>
            {toasts.map(function ({
                id,
                title,
                description,
                action,
                ...props
            }) {
                return (
                    <Toast key={id} {...props} className="mt-2">
                        <div className="grid gap-1">
                            {title && <ToastTitle>{title}</ToastTitle>}
                            {description && (
                                <ToastDescription>
                                    {description}
                                </ToastDescription>
                            )}
                        </div>
                        {action}
                        <ToastClose />
                    </Toast>
                );
            })}
            <ToastViewport />
        </ToastProvider>
    );
}