Add newest registered users section to index, register, login pages

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

@@ -24,7 +24,7 @@ export default async function RegisterPage() {
 	const imager = imagerRaw ?? "https://www.habbo.com/habbo-imaging/avatarimage";
 	const nonce = (await headers()).get("x-nonce") ?? undefined;
 
-	const [online, recentUsers] = await Promise.all([
+	const [online, recentUsers, latestUsers] = await Promise.all([
 		cached("online_count", 10_000, () =>
 			prisma.user.count({ where: { online: "1" } }),
 		).catch(() => 0),
@@ -35,6 +35,13 @@ export default async function RegisterPage() {
 				take: 8,
 			})
 			.catch(() => []),
+		prisma.user
+			.findMany({
+				orderBy: { accountCreated: "desc" },
+				select: { username: true, look: true },
+				take: 8,
+			})
+			.catch(() => []),
 	]);
 
 	return (
@@ -134,6 +141,51 @@ export default async function RegisterPage() {
 					</div>
 				)}
 
+				{latestUsers.length > 0 && (
+					<div
+						className="rounded-2xl border p-4"
+						style={{
+							background: "color-mix(in srgb, var(--color-surface) 70%, transparent)",
+							backdropFilter: "blur(8px)",
+							WebkitBackdropFilter: "blur(8px)",
+							borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
+						}}
+					>
+						<h3
+							className="text-xs font-bold uppercase tracking-widest mb-3 flex items-center gap-2"
+							style={{ color: "var(--color-text-muted)" }}
+						>
+							✨ Newest citizens
+						</h3>
+						<div className="grid grid-cols-4 gap-1.5">
+							{latestUsers.map((u) => (
+								<div
+									key={u.username}
+									className="flex flex-col items-center gap-0.5 p-1.5 rounded-lg"
+									style={{
+										background: "color-mix(in srgb, var(--color-primary) 4%, transparent)",
+									}}
+								>
+									<Image
+										src={avatarImageUrl(imager, u.look, { headOnly: true, direction: 2, size: "s" })}
+										alt=""
+										width={26}
+										height={32}
+										className="rounded-md"
+										unoptimized
+									/>
+									<span
+										className="text-[8px] font-bold truncate w-full text-center leading-tight"
+										style={{ color: "var(--color-text-readable)" }}
+									>
+										{u.username}
+									</span>
+								</div>
+							))}
+						</div>
+					</div>
+				)}
+
 				<p
 					className="text-xs text-center"
 					style={{ color: "var(--color-text-muted)" }}