initial commit of the paytime session frontend

2026-08-22 14:53:27 +02:00
parent 4ad037bd13
commit 9e8e8378a2
43 changed files with 2936 additions and 0 deletions
@@ -0,0 +1,48 @@
+import Link from 'next/link';
+import { getCountriesSummary } from '@/lib/queries';
+import { countryCodeToFlag, countryCodeToName } from '@/lib/steam';
+
+// This page queries the DB directly with no dynamic route segment, so
+// without this Next.js tries to statically pre-render it at BUILD time
+// (requiring a live DB connection then, not just at request time).
+export const dynamic = 'force-dynamic';
+
+export default async function CountriesPage() {
+  const countries = await getCountriesSummary();
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl text-ink mb-1">Countries</h1>
+        <p className="text-sm text-ink-muted">
+          Where the server's players connect from, most players first.
+        </p>
+      </div>
+
+      {countries.length === 0 ? (
+        <div className="panel p-6 text-sm text-ink-muted">No countries recorded yet.</div>
+      ) : (
+        <div className="panel divide-y divide-base-border">
+          {countries.map((c) => (
+            <Link
+              key={c.current_country}
+              href={`/countries/${encodeURIComponent(c.current_country)}`}
+              className="flex items-center justify-between px-4 py-3 hover:bg-base transition-colors"
+            >
+              <div className="flex items-center gap-3">
+                <span className="text-lg" aria-hidden>
+                  {countryCodeToFlag(c.current_country)}
+                </span>
+                <span className="text-ink text-sm">{countryCodeToName(c.current_country)}</span>
+                <span className="text-ink-faint text-xs mono">{c.current_country}</span>
+              </div>
+              <div className="text-sm text-ink-muted mono">
+                {c.player_count} player{c.player_count === 1 ? '' : 's'}
+              </div>
+            </Link>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}