forked from baron/baron-sso
32 lines
1.4 KiB
TypeScript
32 lines
1.4 KiB
TypeScript
import * as React from "react";
|
|
import { useToastState } from "./use-toast";
|
|
import { CheckCircle2, AlertCircle, Info, X } from "lucide-react";
|
|
import { cn } from "../../lib/utils";
|
|
|
|
export function Toaster() {
|
|
const toasts = useToastState();
|
|
|
|
if (toasts.length === 0) return null;
|
|
|
|
return (
|
|
<div className="fixed bottom-4 right-4 z-[100] flex flex-col gap-2 w-full max-w-[320px]">
|
|
{toasts.map((t) => (
|
|
<div
|
|
key={t.id}
|
|
className={cn(
|
|
"flex items-center gap-3 rounded-lg border p-4 shadow-lg animate-in slide-in-from-right-full duration-300",
|
|
t.type === "success" && "bg-emerald-50 border-emerald-200 text-emerald-800 dark:bg-emerald-950 dark:border-emerald-800 dark:text-emerald-200",
|
|
t.type === "error" && "bg-rose-50 border-rose-200 text-rose-800 dark:bg-rose-950 dark:border-rose-800 dark:text-rose-200",
|
|
t.type === "info" && "bg-blue-50 border-blue-200 text-blue-800 dark:bg-blue-950 dark:border-blue-800 dark:text-blue-200"
|
|
)}
|
|
>
|
|
{t.type === "success" && <CheckCircle2 className="h-5 w-5 shrink-0" />}
|
|
{t.type === "error" && <AlertCircle className="h-5 w-5 shrink-0" />}
|
|
{t.type === "info" && <Info className="h-5 w-5 shrink-0" />}
|
|
<p className="text-sm font-medium leading-none">{t.message}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|