feat: add message broadcaster

components/fake-toast.tsx

@@ -0,0 +1,57 @@
+import { Check, CircleAlert, CircleX, Info } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export type ToastType = "success" | "info" | "warning" | "error";
+
+const toastStyles: Record<ToastType, string> = {
+  success: "border-emerald-950 bg-emerald-950/70 text-emerald-300",
+  info: "border-blue-950 bg-blue-950/70 text-blue-300",
+  warning: "border-yellow-950 bg-yellow-950/70 text-yellow-200",
+  error: "border-red-950 bg-red-950/70 text-red-200",
+};
+
+const toastIcons: Record<ToastType, React.ElementType> = {
+  success: Check,
+  info: Info,
+  warning: CircleAlert,
+  error: CircleX,
+};
+
+export function FakeToast({
+  type = "success",
+  children,
+  onIconClick,
+}: {
+  type?: ToastType;
+  children: React.ReactNode;
+  onIconClick?: () => void;
+}) {
+  const Icon = toastIcons[type];
+
+  return (
+    <div
+      className={cn(
+        "flex w-80 items-center gap-2 rounded-lg border p-4 shadow-[0_4px_12px_rgb(0_0_0/0.3)] backdrop-blur-xs",
+        toastStyles[type],
+      )}
+    >
+      {onIconClick ? (
+        <button
+          type="button"
+          aria-label="Change toast type"
+          onClick={onIconClick}
+          className="shrink-0 rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-current"
+        >
+          <Icon
+            aria-hidden="true"
+            className="-m-2 size-8 rounded-full p-2 transition-colors hover:bg-current/20"
+            strokeWidth={2}
+          />
+        </button>
+      ) : (
+        <Icon aria-hidden="true" className="size-4 shrink-0" strokeWidth={2} />
+      )}
+      {children}
+    </div>
+  );
+}