Initial commit

Next.js + Express event management app for Hope Family Church.

frontend/src/components/shared/ToastProvider.tsx

@@ -0,0 +1,52 @@
+"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;
+}