BadgeContainer with counts

app/routes/u.$identifier/index.tsx

@@ -89,15 +89,19 @@ function BadgeContainer(props: { badges: UserPageLoaderData["badges"] }) {
         {smallBadges.length > 0 ? (
           <div className="u__small-badges">
             {smallBadges.map((badge) => (
-              <img
-                key={badge.code}
-                src={`/gif/badges/${badge.code}.gif`}
-                alt={badge.displayName}
-                title={badge.displayName}
-                onClick={() => setBadgeFirst(badge)}
-                width="48"
-                height="48"
-              />
+              <div key={badge.code} className="u__small-badge-container">
+                <img
+                  src={`/gif/badges/${badge.code}.gif`}
+                  alt={badge.displayName}
+                  title={badge.displayName}
+                  onClick={() => setBadgeFirst(badge)}
+                  width="48"
+                  height="48"
+                />
+                {badge.count > 1 ? (
+                  <div className="u__small-badge-count">x{badge.count}</div>
+                ) : null}
+              </div>
             ))}
           </div>
         ) : null}
@@ -110,5 +114,6 @@ function BadgeContainer(props: { badges: UserPageLoaderData["badges"] }) {
 }
 
 function badgeExplanationText(badge: Unpacked<UserPageLoaderData["badges"]>) {
-  return `Awarded for winning ${badge.displayName}`;
+  const countString = badge.count > 1 ? ` (x${badge.count})` : "";
+  return `Awarded for winning ${badge.displayName}${countString}`;
 }

app/styles/global.css

@@ -34,6 +34,7 @@
   --fonts-sm: 0.92rem;
   --fonts-xs: 0.8rem;
   --fonts-xxs: 0.7rem;
+  --fonts-xxxs: 0.6rem;
   --extra-bold: 700;
   --bold: 600;
   --semi-bold: 500;

app/styles/u.css

@@ -104,7 +104,7 @@
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  gap: var(--s-1);
+  gap: var(--s-3);
 }
 
 .u__badge-explanation {
@@ -112,3 +112,19 @@
   font-size: var(--fonts-xs);
   text-align: center;
 }
+
+.u__small-badge-container {
+  position: relative;
+}
+
+.u__small-badge-count {
+  position: absolute;
+  top: 0;
+  right: 0;
+  margin-top: -10px;
+  margin-right: auto;
+  margin-left: auto;
+  color: var(--theme-secondary);
+  font-size: var(--fonts-xxxs);
+  font-weight: var(--bold);
+}