Status Notifications

apps/dispatch/app/(dispatch)/_components/Map.tsx

@@ -4,6 +4,7 @@ import { useEffect, useRef } from "react";
 import L from "leaflet";
 import "leaflet/dist/leaflet.css";
 import ToastCard from "./toast/ToastCard";
+import { Toast, ToastBar, Toaster, toast } from "react-hot-toast";
 
 export default () => {
 	const mapRef = useRef<HTMLDivElement>(null);
@@ -27,6 +28,23 @@ export default () => {
 
 	return (
 		<div className="relative w-full h-full">
+			<div>
+				<Toaster
+					containerStyle={{
+						top: 150,
+						left: 20,
+						right: 20,
+					}}
+					toastOptions={{
+						style: {
+							background: "var(--color-base-100)",
+							color: "var(--color-base-content)",
+						},
+					}}
+					position="top-left"
+					reverseOrder={false}
+				/>
+			</div>
 			<div
 				ref={mapRef}
 				className="w-full h-full rounded-lg shadow-lg"

apps/dispatch/app/(dispatch)/_components/toast/ToastCard.tsx

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { toast } from "react-hot-toast";
 
 interface ToastCard {
 	id: number;
@@ -17,6 +18,53 @@ const MapToastCard2 = () => {
 			content: `Inhalt von Einsatz #${cards.length + 1}.`,
 		};
 		setCards([...cards, newCard]);
+		// DEBUG
+		/* toast("😖 Christoph 31 sendet Status 4", {
+			duration: 10000,
+		}); */
+		// DEBUG
+		const toastId = toast.custom(
+			<div
+				style={{
+					display: "flex",
+					alignItems: "center",
+					lineHeight: 1.3,
+					willChange: "transform",
+					boxShadow:
+						"0 3px 10px rgba(0, 0, 0, 0.1), 0 3px 3px rgba(0, 0, 0, 0.05)",
+					maxWidth: "350px",
+					pointerEvents: "auto",
+					padding: "8px 10px",
+					borderRadius: "8px",
+					background: "var(--color-base-100)",
+					color: "var(--color-base-content)",
+				}}
+			>
+				<div
+					className="toastText flex items-center"
+					style={{
+						display: "flex",
+						justifyContent: "center",
+						margin: "4px 10px",
+						color: "inherit",
+						flex: "1 1 auto",
+						whiteSpace: "pre-line",
+					}}
+				>
+					😖 Christoph 31 sendet Status 5{" "}
+					<button
+						className="btn btn-sm btn-soft btn-accent ml-2"
+						onClick={() => toast.remove(toastId)}
+					>
+						U
+					</button>
+				</div>
+			</div>,
+			{
+				duration: 999999999,
+			},
+		);
+		// DEBUG
 	};
 
 	const removeCard = (id: number) => {