67 lines
2.0 KiB
TypeScript
67 lines
2.0 KiB
TypeScript
import { Link, useParams } from 'react-router-dom';
|
|
import Breadcrumbs from '../components/Breadcrumbs';
|
|
import PackageMissing from '../components/PackageMissing';
|
|
import { findPackage } from './bgm';
|
|
|
|
/**
|
|
* Summary view for a single bgm package: its metadata and counts of parts,
|
|
* surfaces, and setups, each linking to its collection page.
|
|
*/
|
|
export default function BgmPackagePage() {
|
|
const { id } = useParams<{ id: string }>();
|
|
const pkg = findPackage(id);
|
|
if (!pkg) return <PackageMissing id={id ?? ''} />;
|
|
|
|
const partCount = Object.keys(pkg.parts).length;
|
|
const surfaceCount = Object.keys(pkg.surfaces).length;
|
|
const setupCount = Object.keys(pkg.setups).length;
|
|
|
|
const sections = [
|
|
{
|
|
label: 'Parts',
|
|
count: partCount,
|
|
to: `/bgm/${pkg.meta.id}/parts`,
|
|
},
|
|
{
|
|
label: 'Surfaces',
|
|
count: surfaceCount,
|
|
to: `/bgm/${pkg.meta.id}/surfaces`,
|
|
},
|
|
{
|
|
label: 'Setups',
|
|
count: setupCount,
|
|
to: `/bgm/${pkg.meta.id}/setups`,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<Breadcrumbs
|
|
crumbs={[{ label: 'Board games', to: '/bgm' }, { label: pkg.meta.title ?? pkg.meta.id }]}
|
|
/>
|
|
|
|
<div>
|
|
<h1 className="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>
|
|
|
|
<ul className="grid gap-2 sm:grid-cols-3">
|
|
{sections.map((section) => (
|
|
<li key={section.label}>
|
|
<Link
|
|
to={section.to}
|
|
className="block rounded-lg border border-zinc-800 bg-zinc-900 p-3 hover:border-zinc-600"
|
|
>
|
|
<div className="font-medium">{section.label}</div>
|
|
<div className="mt-1 text-sm text-zinc-400">{section.count}</div>
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
);
|
|
} |