feat(web): add bgm package browser

2026-08-09 19:44:27 +08:00
parent c86d7444b8
commit 64c8bb60b3
7 changed files with 222 additions and 2 deletions
@@ -0,0 +1,89 @@
+import { Link, useParams } from 'react-router-dom';
+import packages from 'virtual:bgm/packages';
+
+/**
+ * Detail view for a single bgm package, looked up by id from the
+ * `virtual:bgm/packages` module's list of all discovered packages.
+ */
+export default function BgmPackagePage() {
+  const { id } = useParams<{ id: string }>();
+  const pkg = packages.find((p) => p.meta.id === id);
+
+  if (!pkg) {
+    return (
+      <div className="space-y-4">
+        <p className="text-sm text-zinc-400">No package “{id}”.</p>
+        <Link to="/bgm" className="text-sm text-zinc-300 underline">
+          Back to all packages
+        </Link>
+      </div>
+    );
+  }
+
+  const parts = Object.values(pkg.parts);
+  const surfaces = Object.values(pkg.surfaces);
+  const setups = Object.values(pkg.setups);
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <Link to="/bgm" className="text-sm text-zinc-400 hover:text-zinc-200">
+          ← All packages
+        </Link>
+        <h1 className="mt-1 text-2xl font-semibold">{pkg.meta.title ?? pkg.meta.id}</h1>
+        <p className="mt-1 text-sm text-zinc-400">
+          {pkg.meta.designer ? `${pkg.meta.designer} · ` : ''}
+          {pkg.meta.players ? `${pkg.meta.players} players · ` : ''}
+          {pkg.meta.language}
+        </p>
+      </div>
+
+      <section className="space-y-2">
+        <h2 className="text-lg font-semibold">Parts</h2>
+        <ul className="grid gap-2 sm:grid-cols-2">
+          {parts.map((part) => (
+            <li key={`${part.type}#${part.id}`} className="rounded-lg border border-zinc-800 bg-zinc-900 p-3">
+              <div className="font-medium">
+                {part.type}#{part.id}
+              </div>
+              <div className="mt-1 text-xs text-zinc-400">
+                {part.size ? `size ${part.size.join('×')}mm` : ''}
+                {part.fillet ? ` · fillet ${part.fillet}mm` : ''}
+              </div>
+            </li>
+          ))}
+        </ul>
+      </section>
+
+      <section className="space-y-2">
+        <h2 className="text-lg font-semibold">Surfaces</h2>
+        <ul className="grid gap-2 sm:grid-cols-2">
+          {surfaces.map((surface) => (
+            <li key={`${surface.type}#${surface.id}`} className="rounded-lg border border-zinc-800 bg-zinc-900 p-3">
+              <div className="font-medium">
+                {surface.type}#{surface.id}
+              </div>
+              <div className="mt-1 text-xs text-zinc-400">
+                {surface.size ? `size ${surface.size.join('×')}mm` : ''} · {surface.layout.length} routes
+              </div>
+            </li>
+          ))}
+        </ul>
+      </section>
+
+      <section className="space-y-2">
+        <h2 className="text-lg font-semibold">Setups</h2>
+        {setups.map((setup) => (
+          <div key={`${setup.type}#${setup.id}`} className="rounded-lg border border-zinc-800 bg-zinc-900 p-3">
+            <div className="font-medium">
+              {setup.type}#{setup.id}
+            </div>
+            <pre className="mt-2 overflow-x-auto text-xs text-zinc-400">
+              {JSON.stringify(setup.setup, null, 2)}
+            </pre>
+          </div>
+        ))}
+      </section>
+    </div>
+  );
+}