diff --git a/src/app/page.tsx b/src/app/page.tsx index 881f46ae..2e44a780 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,3 +1,6 @@ +import discoverableSvg from "@/assets/guild-badges/discoverable.svg"; +import partnerSvg from "@/assets/guild-badges/partner.svg"; +import verifiedSvg from "@/assets/guild-badges/verified.svg"; import logoImg from "@/assets/logo.png"; import importImg from "@/assets/showcases/import.png"; import levelingImg from "@/assets/showcases/leveling.png"; @@ -6,17 +9,16 @@ import premiumImg from "@/assets/showcases/premium.png"; import rankCardsImg from "@/assets/showcases/rank-cards.png"; import roleRewardsImg from "@/assets/showcases/role-rewards.png"; import { ExternalLink } from "@/components/ExternalLink.tsx"; +import { ImageWithFallback } from "@/components/ImageWithFallback.tsx"; import { Showcase } from "@/components/Showcase"; +import { type Snowflake, guildIcon } from "@/utils/discord-cdn.ts"; import { formatNumber } from "@/utils/format-number.ts"; +import { formatToNearestOrderOfMagnitude } from "@/utils/format-to-nearest-order-of-magnitude.ts"; import { makeApiRequest } from "@/utils/make-api-request.ts"; import { AttachMoney, Brush, CloudDownload, Launch, MilitaryTech, Speed, TrendingUp } from "@mui/icons-material"; import Image from "next/image"; import Link from "next/link"; import { BOT_INVITE } from "../../shared-links.mjs"; -import { guildIcon, type Snowflake } from "@/utils/discord-cdn.ts"; -import { ImageWithFallback } from "@/components/ImageWithFallback.tsx"; -import verifiedSvg from "@/assets/guild-badges/verified.svg"; -import { formatToNearestOrderOfMagnitude } from "@/utils/format-to-nearest-order-of-magnitude.ts"; export default async function Homepage() { const { @@ -188,7 +190,10 @@ function ShowcaseSeparator() { return
; } -function FeaturedGuild({ id, icon, name, memberCount }: FeaturedGuild) { +function FeaturedGuild({ id, icon, name, memberCount, partner, verified }: FeaturedGuild) { + const iconSrc = verified ? verifiedSvg : partner ? partnerSvg : discoverableSvg; + const alt = verified ? "Verified guild badge" : partner ? "Partner guild badge" : "Discoverable guild badge"; + return (

- Verified guild badge + {alt} {name}

@@ -253,4 +258,6 @@ interface FeaturedGuild { name: string; icon: string | null; memberCount: number; + verified: boolean; + partner: boolean; } diff --git a/src/components/ImageWithFallback.tsx b/src/components/ImageWithFallback.tsx index 85f3dbe6..af5c5ed1 100644 --- a/src/components/ImageWithFallback.tsx +++ b/src/components/ImageWithFallback.tsx @@ -1,8 +1,8 @@ "use client"; +import fallbackAvatarImg from "@/assets/fallback-avatar.png"; import Image, { type StaticImageData } from "next/image"; import { type ComponentProps, useEffect, useState } from "react"; -import fallbackAvatarImg from "@/assets/fallback-avatar.png"; /** * A wrapper around Next.js' Image component that allows for a fallback image to be used if the original image fails to load.