trains: pokedex pages (builders, operators, countries, detail, random) and registrations

src/lib/trains/MakerTile.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	import BrandBadge from '#lib/cars/BrandBadge.svelte';
+	import { fmtCompact, type MakerTileData } from './shared.js';
+
+	let { maker, compact = false }: { maker: MakerTileData; compact?: boolean } = $props();
+</script>
+
+<a
+	href={maker.href ?? `/trackers/trains/${maker.slug}`}
+	class={['tile', { compact }]}
+	title={maker.name}
+>
+	<span class="mark"><BrandBadge name={maker.name} logo={maker.logo} size="xl" /></span>
+	<span class="name">{maker.name}</span>
+	{#if !compact}
+		<span class="meta"
+			>{maker.types}
+			{maker.types === 1 ? 'type' : 'types'}{#if maker.built}
+				· {fmtCompact(maker.built)} built{/if}</span
+		>
+	{/if}
+</a>
+
+<style>
+	.tile {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 0.45rem;
+		height: 100%;
+		padding: 0.7rem 0.6rem 0.65rem;
+		border: 1px solid var(--site-border);
+		border-radius: 0.9rem;
+		background: var(--site-surface);
+		text-align: center;
+		transition:
+			transform 0.15s,
+			border-color 0.15s,
+			background 0.15s;
+	}
+	.tile:hover,
+	.tile:focus-visible {
+		transform: translateY(-2px);
+		border-color: var(--site-muted);
+		background: var(--site-hover);
+	}
+	.mark {
+		display: grid;
+		place-items: center;
+		width: 100%;
+		aspect-ratio: 16 / 9;
+	}
+	.compact .mark {
+		aspect-ratio: 2 / 1;
+	}
+	.name {
+		max-width: 100%;
+		font-size: 0.85rem;
+		font-weight: 600;
+		line-height: 1.2;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.compact .name {
+		font-size: 0.75rem;
+		font-weight: 500;
+		color: var(--site-muted);
+	}
+	.meta {
+		font-size: 0.7rem;
+		color: var(--site-muted);
+		font-variant-numeric: tabular-nums;
+	}
+</style>