Files
Epicnabbo-Catalogus-Updated…/src/app/rares/page.tsx
T
Simo e004dfedaf i18n: translate all public page bodies (EN + IT)
Internationalised the ~44 public pages with next-intl (the shell was
already translated). Each page now pulls its copy from a "pages.<slug>"
namespace via getTranslations (server) / useTranslations (client); the
EN + IT catalogs were authored by parallel agents and merged centrally,
with natural Italian (ICU plurals) and it backfilled from en for any
gap. request.ts gained getMessageFallback/onError so a missing key
degrades to the English value, never a raw key.

Behaviour unchanged (only display text moved to t() calls; queries,
actions, fields, ContentCard structure preserved). Verified on the prod
server: with NEXT_LOCALE=it, home/community/staff/news/shop/rankings all
render Italian copy, no raw-key leakage; English unchanged. The nav
language switcher toggles EN/IT live. tsc 0, vitest 49/49, next build 0.

Admin pages intentionally left in English (staff tooling).
2026-06-28 20:40:06 +02:00

104 lines
3.2 KiB
TypeScript

import { getTranslations } from "next-intl/server";
import Link from "next/link";
import { ContentCard, EmptyState } from "@/components/public/ui";
import { prisma } from "@/lib/prisma";
import { siteSettings } from "@/lib/services/site-settings";
export const dynamic = "force-dynamic";
export const metadata = { title: "Rare values" };
type CategoryRow = {
id: bigint;
name: string;
badge: string;
priority: number;
};
export default async function RareValuesPage() {
const t = await getTranslations("pages.rares");
let categories: CategoryRow[] = [];
try {
categories = await prisma.websiteRareValueCategories.findMany({
orderBy: [{ priority: "asc" }, { name: "asc" }],
select: { id: true, name: true, badge: true, priority: true },
});
} catch {
categories = [];
}
// Per-category rare counts (grouped so we avoid N queries).
const counts = new Map<string, number>();
try {
const grouped = await prisma.websiteRareValues.groupBy({
by: ["categoryId"],
_count: { _all: true },
});
for (const g of grouped) {
counts.set(String(g.categoryId), g._count._all);
}
} catch {
// leave counts empty -> shown as 0
}
const badgesBase = (await siteSettings.get("badges_path", "")) ?? "";
return (
<main style={{ display: "grid", gap: "1.5rem" }}>
<ContentCard
icon="💎"
title={t("title")}
subtitle={t("subtitle")}
/>
{categories.length === 0 ? (
<ContentCard padded={false}>
<EmptyState icon="💎">{t("empty")}</EmptyState>
</ContentCard>
) : (
<div className="card-grid sm-2 lg-3">
{categories.map((c) => {
const id = String(c.id);
const count = counts.get(id) ?? 0;
const badgeSrc = badgesBase && c.badge ? `${badgesBase}/${c.badge}.gif` : "";
return (
<Link
key={id}
href={`/rares/${id}`}
className="content-card hover-lift"
style={{ color: "inherit", textDecoration: "none" }}
>
<div className="content-card-head">
{badgeSrc ? (
// eslint-disable-next-line @next/next/no-img-element
<img
src={badgeSrc}
alt={`${c.name} badge`}
width={36}
height={36}
style={{ flexShrink: 0 }}
/>
) : (
<span className="content-card-icon" aria-hidden>
💎
</span>
)}
<div className="content-card-head-text">
<p className="content-card-title">{c.name}</p>
<p className="content-card-subtitle">
{t("rareCount", { count })}
</p>
</div>
</div>
<div className="content-card-body">
<span className="btn btn-outline">{t("viewRares")}</span>
</div>
</Link>
);
})}
</div>
)}
</main>
);
}