64 lines
2.1 KiB
TypeScript
64 lines
2.1 KiB
TypeScript
import { getTranslations } from "next-intl/server";
|
|
import { ContentCard, EmptyState } from "@/components/public/ui";
|
|
import { prisma } from "@/lib/prisma";
|
|
|
|
export const revalidate = 300;
|
|
|
|
export const metadata = { title: "Badges" };
|
|
|
|
// Canonical Habbo badge image CDN. A badge_key (e.g. "ADM") maps to a .gif here.
|
|
const BADGE_IMG_BASE = "https://images.habbo.com/c_images/album1584";
|
|
|
|
export default async function BadgesPage() {
|
|
const t = await getTranslations("pages.badges");
|
|
|
|
const badges = await prisma.websiteBadges
|
|
.findMany({
|
|
orderBy: { badgeName: "asc" },
|
|
})
|
|
.catch(() => []);
|
|
|
|
return (
|
|
<main style={{ display: "grid", gap: "1.5rem" }}>
|
|
<ContentCard
|
|
icon="🏅"
|
|
title={t("title")}
|
|
subtitle={t("subtitle")}
|
|
/>
|
|
|
|
<ContentCard padded={badges.length === 0}>
|
|
{badges.length === 0 ? (
|
|
<EmptyState icon="🏅">{t("noBadges")}</EmptyState>
|
|
) : (
|
|
<div className="card-grid sm-2 lg-3" style={{ padding: "1rem" }}>
|
|
{badges.map((badge) => (
|
|
<div
|
|
key={String(badge.id)}
|
|
className="card hover"
|
|
style={{ display: "flex", gap: "0.9rem", alignItems: "flex-start" }}
|
|
>
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img
|
|
src={`${BADGE_IMG_BASE}/${badge.badgeKey}.gif`}
|
|
alt={badge.badgeName}
|
|
title={badge.badgeKey}
|
|
width={40}
|
|
height={40}
|
|
style={{ flexShrink: 0 }}
|
|
/>
|
|
<div style={{ minWidth: 0 }}>
|
|
<h3 style={{ margin: "0 0 0.25rem", fontSize: "1rem" }}>{badge.badgeName}</h3>
|
|
<p className="muted" style={{ margin: "0 0 0.35rem", fontFamily: "monospace" }}>
|
|
{badge.badgeKey}
|
|
</p>
|
|
<p style={{ margin: 0, fontSize: "0.9rem" }}>{badge.badgeDescription}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</ContentCard>
|
|
</main>
|
|
);
|
|
}
|