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,62 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import Link from 'next/link';
+
+interface MapSummary {
+  map_name: string;
+  times_played: number;
+  last_played: string;
+}
+
+export default function MapSearch() {
+  const [q, setQ] = useState('');
+  const [maps, setMaps] = useState<MapSummary[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const handle = setTimeout(async () => {
+      setLoading(true);
+      const res = await fetch(`/api/maps?q=${encodeURIComponent(q)}`);
+      const data = await res.json();
+      setMaps(data.maps);
+      setLoading(false);
+    }, 250);
+
+    return () => clearTimeout(handle);
+  }, [q]);
+
+  return (
+    <div className="space-y-4">
+      <input
+        type="text"
+        placeholder="Search by map name…"
+        value={q}
+        onChange={(e) => setQ(e.target.value)}
+        className="w-full bg-base-panel border border-base-border rounded-lg px-4 py-3 text-ink placeholder:text-ink-faint focus:border-accent/50 transition-colors"
+      />
+
+      <div className="panel divide-y divide-base-border">
+        {loading ? (
+          <div className="p-4 text-sm text-ink-faint font-mono">loading…</div>
+        ) : maps.length === 0 ? (
+          <div className="p-4 text-sm text-ink-muted">No maps found.</div>
+        ) : (
+          maps.map((m) => (
+            <Link
+              key={m.map_name}
+              href={`/maps/${encodeURIComponent(m.map_name)}`}
+              className="flex items-center justify-between px-4 py-3 hover:bg-base transition-colors"
+            >
+              <div className="text-ink text-sm">{m.map_name}</div>
+              <div className="flex items-center gap-4 text-xs text-ink-faint font-mono">
+                <span>{m.times_played}× played</span>
+                <span>last {new Date(m.last_played.replace(' ', 'T')).toLocaleDateString()}</span>
+              </div>
+            </Link>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}