error banner: add error handling

Author: te-ce

src/app/page.tsx

@@ -1,21 +1,26 @@
 "use client";
 
 import { CreateRoom } from "@/components/createRoom";
+import { ErrorBanner } from "@/components/ErrorBanner";
 import { useRouter } from "next/navigation";
+import { Suspense } from "react";
 
 export default function Home() {
   const router = useRouter();
   return (
-    <main className="flex h-screen w-screen flex-col items-center justify-center gap-8 p-4">
-      <header>
-        <h1 className="text-2xl font-bold tracking-tight text-green-500">
-          {">"}private_chat
-        </h1>
-        <p className="text-sm text-zinc-500">
-          A private, self-destructing chat room.
-        </p>
-      </header>
-      <CreateRoom router={router} />
-    </main>
+    <Suspense>
+      <main className="flex h-screen w-screen flex-col items-center justify-center gap-8 p-4">
+        <ErrorBanner />
+        <header>
+          <h1 className="text-2xl font-bold tracking-tight text-green-500">
+            {">"}private_chat
+          </h1>
+          <p className="text-sm text-zinc-500">
+            A private, self-destructing chat room.
+          </p>
+        </header>
+        <CreateRoom router={router} />
+      </main>
+    </Suspense>
   );
 }

src/components/ErrorBanner.tsx

@@ -0,0 +1,38 @@
+import { useSearchParams } from "next/navigation";
+
+export const ErrorBanner = () => {
+  const searchParams = useSearchParams();
+  const wasDestroyed = searchParams.get("destroyed") === "true";
+  const error = searchParams.get("error");
+  const roomNotFound = error === "room-not-found";
+  const roomFull = error === "room-full";
+
+  return (
+    <>
+      {wasDestroyed && (
+        <div className="border border-red-900 bg-red-950/50 p-4 text-center">
+          <p className="text-sm font-bold text-red-500">ROOM DESTROYED</p>
+          <p className="mt-1 text-xs text-zinc-500">
+            All messages were permanently deleted.
+          </p>
+        </div>
+      )}
+      {roomNotFound && (
+        <div className="border border-red-900 bg-red-950/50 p-4 text-center">
+          <p className="text-sm font-bold text-red-500">ROOM NOT FOUND</p>
+          <p className="mt-1 text-xs text-zinc-500">
+            This room may have expired or never existed.
+          </p>
+        </div>
+      )}
+      {roomFull && (
+        <div className="border border-red-900 bg-red-950/50 p-4 text-center">
+          <p className="text-sm font-bold text-red-500">ROOM FULL</p>
+          <p className="mt-1 text-xs text-zinc-500">
+            This room is at maximum capacity.
+          </p>
+        </div>
+      )}
+    </>
+  );
+};