Hacked some shit together with Github Copilot

client/src/pages/ServerPage.tsx

@@ -0,0 +1,68 @@
+import { useEffect, useState } from "react";
+import ServerCard from "../components/ServerCard.tsx";
+
+interface Snapshot {
+    id: string;
+    timestamp: string;
+    progress: number;
+    status: "pending" | "in-progress" | "completed" | "error";
+}
+
+interface ServerData {
+    name: string;
+    current: Snapshot[];
+    history: Snapshot[];
+}
+
+export default function ServerPage() {
+    const [serverA, setServerA] = useState<ServerData | null>(null);
+    const [serverB, setServerB] = useState<ServerData | null>(null);
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        async function fetchData() {
+            try {
+                const response = await fetch("/api/snapshots");
+                const data = await response.json();
+                setServerA(data.serverA);
+                setServerB(data.serverB);
+            } catch (error) {
+                console.error("Error fetching snapshot data:", error);
+            } finally {
+                setLoading(false);
+            }
+        }
+
+        fetchData();
+    }, []);
+
+    if (loading) {
+        return <div>Loading...</div>;
+    }
+
+    if (!serverA || !serverB) {
+        return <div>Error loading server data.</div>;
+    }
+
+    return (
+        <div className="min-h-dvh flex flex-col bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200">
+            {/* Header */}
+            <header className="bg-gray-200 dark:bg-gray-800 p-4 shadow-md">
+                <h1 className="text-3xl font-bold text-center">Server Snapshots</h1>
+            </header>
+
+            {/* Main Content */}
+            <main className="flex-1 p-6">
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <ServerCard serverName={serverA.name} snapshots={serverA.current} />
+                    <ServerCard serverName={serverB.name} snapshots={serverB.current} />
+                </div>
+            </main>
+
+            {/* Footer */}
+            <footer className="bg-gray-200 dark:bg-gray-800 p-4 text-center">
+                <p>&copy; 2023 ZFS Monitoring. All rights reserved.</p>
+            </footer>
+        </div>
+    );
+}