86 lines
2.1 KiB
TypeScript
86 lines
2.1 KiB
TypeScript
import { desc } from "drizzle-orm";
|
|
import Link from "next/link";
|
|
import { getTranslations } from "next-intl/server";
|
|
import {
|
|
ContentCard,
|
|
EmptyState,
|
|
OnlineBadge,
|
|
RankBadge,
|
|
} from "@/components/public/ui";
|
|
import { UserAvatarThumbnail } from "@/components/shared/user-avatar-thumbnail";
|
|
import { db, User } from "@/lib/db";
|
|
|
|
export const metadata = { title: "Rankings" };
|
|
|
|
type TopUser = {
|
|
username: string;
|
|
look: string;
|
|
credits: number;
|
|
rank: number;
|
|
online: string;
|
|
};
|
|
|
|
export default async function RankingsPage() {
|
|
const t = await getTranslations("pages.rankings");
|
|
let users: TopUser[] = [];
|
|
try {
|
|
users = await db
|
|
.select({
|
|
username: User.username,
|
|
look: User.look,
|
|
credits: User.credits,
|
|
rank: User.rank,
|
|
online: User.online,
|
|
})
|
|
.from(User)
|
|
.orderBy(desc(User.credits))
|
|
.limit(12);
|
|
} catch {
|
|
users = [];
|
|
}
|
|
|
|
return (
|
|
<main style={{ display: "grid", gap: "1.5rem" }}>
|
|
<ContentCard icon="🏆" title={t("title")} subtitle={t("subtitle")} />
|
|
|
|
<ContentCard padded={users.length === 0}>
|
|
{users.length === 0 ? (
|
|
<EmptyState icon="🏆">{t("emptyState")}</EmptyState>
|
|
) : (
|
|
<div className="card-grid sm-2 lg-3" style={{ padding: "1rem" }}>
|
|
{users.map((u, i) => {
|
|
return (
|
|
<div
|
|
key={u.username}
|
|
className="card hover"
|
|
style={{
|
|
display: "flex",
|
|
gap: "0.9rem",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<RankBadge position={i + 1} />
|
|
<UserAvatarThumbnail
|
|
figure={u.look}
|
|
alt={`${u.username} avatar`}
|
|
/>
|
|
<div style={{ minWidth: 0, flex: 1 }}>
|
|
<h3 style={{ margin: "0 0 0.25rem", fontSize: "1rem" }}>
|
|
<Link href={`/u/${u.username}`}>{u.username}</Link>
|
|
</h3>
|
|
<p className="currency" style={{ margin: "0 0 0.3rem" }}>
|
|
<span className="coin credits">c</span>
|
|
{u.credits.toLocaleString()}
|
|
</p>
|
|
<OnlineBadge online={u.online === "1"} />
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</ContentCard>
|
|
</main>
|
|
);
|
|
}
|