fix: standardize public avatar thumbnails

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

@@ -2,8 +2,8 @@ import { desc, eq, inArray } from "drizzle-orm";
 import Link from "next/link";
 import { getTranslations } from "next-intl/server";
 import { ContentCard, EmptyState, RankBadge } from "@/components/public/ui";
+import { UserAvatarThumbnail } from "@/components/shared/user-avatar-thumbnail";
 import { db, User, UsersCurrency, UsersSettings } from "@/lib/db";
-import { avatarImageUrl } from "@/lib/format";
 
 export const metadata = { title: "Leaderboard" };
 
@@ -206,23 +206,15 @@ export default async function LeaderboardPage({
 						</thead>
 						<tbody>
 							{rows.map((row, i) => {
-								const avatar = avatarImageUrl(row.look, {
-									size: "s",
-									headOnly: true,
-								});
 								return (
 									<tr key={row.username}>
 										<td>
 											<RankBadge position={i + 1} />
 										</td>
 										<td>
-											{/* eslint-disable-next-line @next/next/no-img-element */}
-											<img
-												className="avatar"
-												src={avatar}
+											<UserAvatarThumbnail
+												figure={row.look}
 												alt={`${row.username} avatar`}
-												width={40}
-												height={40}
 											/>
 										</td>
 										<td>