fix: standardize public avatar thumbnails

src/app/(site)/rankings/page.tsx

@@ -1,5 +1,4 @@
 import { desc } from "drizzle-orm";
-import Image from "next/image";
 import Link from "next/link";
 import { getTranslations } from "next-intl/server";
 import {
@@ -8,8 +7,8 @@ import {
 	OnlineBadge,
 	RankBadge,
 } from "@/components/public/ui";
+import { UserAvatarThumbnail } from "@/components/shared/user-avatar-thumbnail";
 import { db, User } from "@/lib/db";
-import { avatarImageUrl } from "@/lib/format";
 
 export const metadata = { title: "Rankings" };
 
@@ -50,9 +49,6 @@ export default async function RankingsPage() {
 				) : (
 					<div className="card-grid sm-2 lg-3" style={{ padding: "1rem" }}>
 						{users.map((u, i) => {
-							const avatar = avatarImageUrl(u.look, {
-								size: "m",
-							});
 							return (
 								<div
 									key={u.username}
@@ -64,13 +60,9 @@ export default async function RankingsPage() {
 									}}
 								>
 									<RankBadge position={i + 1} />
-									<Image
-										className="avatar"
-										src={avatar}
+									<UserAvatarThumbnail
+										figure={u.look}
 										alt={`${u.username} avatar`}
-										width={50}
-										height={90}
-										unoptimized
 									/>
 									<div style={{ minWidth: 0, flex: 1 }}>
 										<h3 style={{ margin: "0 0 0.25rem", fontSize: "1rem" }}>