public games list functionality

client/src/components/home/PublicGames/PublicGames.tsx

@@ -0,0 +1,48 @@
+import { getPublicGames } from "@/lib/game";
+import JoinButton from "./JoinButton";
+import RefreshButton from "./RefreshButton";
+
+export default async function PublicGames() {
+  const games = await getPublicGames();
+
+  return (
+    <div className="flex flex-col items-center">
+      <h2 className="mb-2 text-2xl font-bold leading-tight">
+        Public games <RefreshButton />
+      </h2>
+
+      <div className="bg-base-100 h-80 max-h-80 overflow-y-auto">
+        <table className="table-compact lg:table-normal table rounded-none">
+          <thead>
+            <tr>
+              <th className="w-48">Host</th>
+              <th className="w-48">Opponent</th>
+              <th className="w-24"></th>
+            </tr>
+          </thead>
+          <tbody>
+            {games && games.length > 0 ? (
+              games.map((game) => (
+                <tr key={game.code} className="group">
+                  <td>{game.host?.name}</td>
+                  <td>
+                    {(game.host?.id === game.white?.id ? game.black?.name : game.white?.name) || ""}
+                  </td>
+                  <th>
+                    <JoinButton code={game.code as string} />
+                  </th>
+                </tr>
+              ))
+            ) : (
+              <tr>
+                <td>(empty)</td>
+                <td></td>
+                <td></td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}