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"