53 lines
1.6 KiB
TypeScript
53 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import React, { createContext, useCallback, useContext, useMemo, useState } from "react";
|
|
|
|
export type Toast = { id: string; message: string; type?: "info" | "success" | "error" };
|
|
|
|
type ToastContextValue = {
|
|
show: (message: string, type?: Toast["type"]) => void;
|
|
};
|
|
|
|
const ToastContext = createContext<ToastContextValue | undefined>(undefined);
|
|
|
|
export function ToastProvider({ children }: { children: React.ReactNode }) {
|
|
const [toasts, setToasts] = useState<Toast[]>([]);
|
|
|
|
const show = useCallback((message: string, type: Toast["type"] = "info") => {
|
|
const id = Math.random().toString(36).slice(2);
|
|
setToasts((t) => [...t, { id, message, type }]);
|
|
setTimeout(() => setToasts((t) => t.filter((x) => x.id !== id)), 3500);
|
|
}, []);
|
|
|
|
const value = useMemo(() => ({ show }), [show]);
|
|
|
|
return (
|
|
<ToastContext.Provider value={value}>
|
|
{children}
|
|
<div className="fixed inset-x-0 top-2 z-[100] flex flex-col items-center space-y-2">
|
|
{toasts.map((t) => (
|
|
<div
|
|
key={t.id}
|
|
className={[
|
|
"rounded px-3 py-2 text-sm shadow",
|
|
t.type === "success" && "bg-green-600 text-white",
|
|
t.type === "error" && "bg-red-600 text-white",
|
|
(!t.type || t.type === "info") && "bg-gray-800 text-white",
|
|
]
|
|
.filter(Boolean)
|
|
.join(" ")}
|
|
>
|
|
{t.message}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</ToastContext.Provider>
|
|
);
|
|
}
|
|
|
|
export function useToast() {
|
|
const ctx = useContext(ToastContext);
|
|
if (!ctx) throw new Error("useToast must be used within ToastProvider");
|
|
return ctx;
|
|
}
|