impl guild badges

almeidx · May 19, 2024 · 2657fa2 · 2657fa2
1 parent 5e17dca
commit 2657fa2
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 7 deletions.
diff --git 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 <div className="my-4 h-6 w-[2px] bg-gradient-radial" />;
 }
 
-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 (
 		<div className="flex items-center gap-6 bg-darker px-3 py-2 border border-white/25 rounded-lg">
 			<ImageWithFallback
@@ -201,7 +206,7 @@ function FeaturedGuild({ id, icon, name, memberCount }: FeaturedGuild) {
 
 			<div className="flex flex-col">
 				<p className="flex items-center gap-2 text-2xl font-bold">
-					<Image src={verifiedSvg} alt="Verified guild badge" width={20} height={20} className="size-5 rounded-full" />
+					<Image src={iconSrc} alt={alt} width={20} height={20} className="size-5 rounded-full" />
 					{name}
 				</p>
 				<p className="text-lg text-white/50">
@@ -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
@@ -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.