107 lines
2.9 KiB
TypeScript
107 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
createContext,
|
|
useCallback,
|
|
useContext,
|
|
useMemo,
|
|
useState,
|
|
type ReactNode,
|
|
} from "react";
|
|
import { CheckCircle2, Info, X, XCircle } from "lucide-react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
|
|
type ToastType = "success" | "error" | "info";
|
|
|
|
type Toast = {
|
|
id: number;
|
|
type: ToastType;
|
|
title: string;
|
|
description?: string;
|
|
};
|
|
|
|
type ToastInput = Omit<Toast, "id">;
|
|
|
|
type ToastContextValue = {
|
|
showToast: (toast: ToastInput) => void;
|
|
};
|
|
|
|
const ToastContext = createContext<ToastContextValue | null>(null);
|
|
|
|
const iconByType = {
|
|
success: CheckCircle2,
|
|
error: XCircle,
|
|
info: Info,
|
|
};
|
|
|
|
const colorByType = {
|
|
success: "border-emerald-200 bg-emerald-50 text-emerald-950",
|
|
error: "border-red-200 bg-red-50 text-red-950",
|
|
info: "border-slate-200 bg-white text-slate-950",
|
|
};
|
|
|
|
export function ToastProvider({ children }: { children: ReactNode }) {
|
|
const [toasts, setToasts] = useState<Toast[]>([]);
|
|
|
|
const dismissToast = useCallback((id: number) => {
|
|
setToasts((current) => current.filter((toast) => toast.id !== id));
|
|
}, []);
|
|
|
|
const showToast = useCallback((toast: ToastInput) => {
|
|
const id = Date.now() + Math.floor(Math.random() * 1000);
|
|
setToasts((current) => [...current, { ...toast, id }]);
|
|
window.setTimeout(() => dismissToast(id), 5000);
|
|
}, [dismissToast]);
|
|
|
|
const value = useMemo(() => ({ showToast }), [showToast]);
|
|
|
|
return (
|
|
<ToastContext.Provider value={value}>
|
|
{children}
|
|
<div className="fixed right-6 top-6 z-50 flex w-[min(24rem,calc(100vw-3rem))] flex-col gap-3">
|
|
{toasts.map((toast) => {
|
|
const Icon = iconByType[toast.type];
|
|
|
|
return (
|
|
<div
|
|
key={toast.id}
|
|
className={`rounded-lg border p-4 shadow-lg ${colorByType[toast.type]}`}
|
|
role="status"
|
|
>
|
|
<div className="flex gap-3">
|
|
<Icon className="mt-0.5 h-5 w-5 shrink-0" />
|
|
<div className="min-w-0 flex-1">
|
|
<p className="text-sm font-semibold">{toast.title}</p>
|
|
{toast.description && (
|
|
<p className="mt-1 text-sm opacity-80">{toast.description}</p>
|
|
)}
|
|
</div>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-7 w-7 shrink-0"
|
|
onClick={() => dismissToast(toast.id)}
|
|
aria-label="Meldung schließen"
|
|
>
|
|
<X size={16} />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</ToastContext.Provider>
|
|
);
|
|
}
|
|
|
|
export function useToast() {
|
|
const context = useContext(ToastContext);
|
|
|
|
if (!context) {
|
|
throw new Error("useToast muss innerhalb des ToastProvider verwendet werden");
|
|
}
|
|
|
|
return context;
|
|
}
|