From 5bbe5c2720a4518d1f1312cc4b73893137b8ac6a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Thu, 15 Jan 2026 12:55:18 -0600
Subject: [PATCH] feat: count badge

---
 packages/i18n/strings/en.json                 |  3 +-
 .../src/components/AvatarCard/index.css       |  6 ++++
 .../src/components/AvatarCard/index.tsx       | 10 +++++++
 .../website-ue/src/components/Badge/index.css |  9 ++++++
 .../website-ue/src/components/Badge/index.tsx | 30 +++++++++++++++++++
 .../website-ue/src/components/Text/index.tsx  |  2 +-
 6 files changed, 58 insertions(+), 2 deletions(-)
 create mode 100644 packages/website-ue/src/components/Badge/index.css
 create mode 100644 packages/website-ue/src/components/Badge/index.tsx

diff --git a/packages/i18n/strings/en.json b/packages/i18n/strings/en.json
index 87854d306..6ff8d57be 100644
--- a/packages/i18n/strings/en.json
+++ b/packages/i18n/strings/en.json
@@ -16,7 +16,8 @@
     "t": "{value}t",
     "bhp_t": "{value}bhp/t",
     "deg_s": "{value}°/s",
-    "%": "{value}%"
+    "%": "{value}%",
+    "x": "x{value}"
   },
 
   "tools": {
diff --git a/packages/website-ue/src/components/AvatarCard/index.css b/packages/website-ue/src/components/AvatarCard/index.css
index 6ce90f706..8d531a608 100644
--- a/packages/website-ue/src/components/AvatarCard/index.css
+++ b/packages/website-ue/src/components/AvatarCard/index.css
@@ -18,6 +18,12 @@
       background-size: cover;
       background-position: center;
     }
+
+    .count {
+      position: absolute;
+      bottom: var(--space-3);
+      right: var(--space-3);
+    }
   }
 
   .avatar-label {
diff --git a/packages/website-ue/src/components/AvatarCard/index.tsx b/packages/website-ue/src/components/AvatarCard/index.tsx
index 78a8dc99c..50c9ec7bf 100644
--- a/packages/website-ue/src/components/AvatarCard/index.tsx
+++ b/packages/website-ue/src/components/AvatarCard/index.tsx
@@ -1,5 +1,8 @@
+import { literals } from "@blitzkit/i18n";
+import { useStrings } from "../../hooks/useStrings";
 import type { Avatar } from "../../protos/avatar";
 import type { SkeletonProps } from "../../types/SkeletonProps";
+import { Badge } from "../Badge";
 import { Text } from "../Text";
 import "./index.css";
 
@@ -29,6 +32,7 @@ interface SeriesProps {
 
 function Series({ avatars }: SeriesProps) {
   const count = Math.min(avatars.length, MAX_CARDS);
+  const strings = useStrings();
 
   return (
     <div className="avatar-series">
@@ -45,6 +49,12 @@ function Series({ avatars }: SeriesProps) {
           }}
         />
       ))}
+
+      {avatars.length > 1 && (
+        <Badge color="gray" highContrast className="count">
+          {literals(strings.units.x, { value: avatars.length })}
+        </Badge>
+      )}
     </div>
   );
 }
diff --git a/packages/website-ue/src/components/Badge/index.css b/packages/website-ue/src/components/Badge/index.css
new file mode 100644
index 000000000..dbecd8f99
--- /dev/null
+++ b/packages/website-ue/src/components/Badge/index.css
@@ -0,0 +1,9 @@
+.badge {
+  border-radius: var(--max-size);
+  box-shadow: var(--shadow-aggressive);
+
+  padding: var(--space-2) var(--space-3);
+
+  font-size: var(--font-size-minor);
+  font-weight: var(--weight-medium);
+}
diff --git a/packages/website-ue/src/components/Badge/index.tsx b/packages/website-ue/src/components/Badge/index.tsx
new file mode 100644
index 000000000..bb98ffd6d
--- /dev/null
+++ b/packages/website-ue/src/components/Badge/index.tsx
@@ -0,0 +1,30 @@
+import type { ComponentProps } from "react";
+import { classNames } from "../../core/ui/classNames";
+import type { Color } from "../../core/ui/color";
+import "./index.css";
+
+export interface BadgeProps extends ComponentProps<"div"> {
+  color?: Color | "accent";
+  highContrast?: boolean;
+}
+
+export function Badge({
+  className,
+  style,
+  color = "accent",
+  highContrast,
+  ...props
+}: BadgeProps) {
+  return (
+    <div
+      className={classNames("badge", className)}
+      style={{
+        backgroundColor: `var(--${color}-${highContrast ? 12 : 9})`,
+        color: `var(--gray-${highContrast ? 1 : 12})`,
+
+        ...style,
+      }}
+      {...props}
+    />
+  );
+}
diff --git a/packages/website-ue/src/components/Text/index.tsx b/packages/website-ue/src/components/Text/index.tsx
index ef76eefb5..5a8dab968 100644
--- a/packages/website-ue/src/components/Text/index.tsx
+++ b/packages/website-ue/src/components/Text/index.tsx
@@ -4,7 +4,7 @@ import type { Color } from "../../core/ui/color";
 import "./index.css";
 
 export interface TextProps extends ComponentProps<"span"> {
-  color?: Color;
+  color?: Color | "accent";
   weight?: "light" | "regular" | "medium" | "bold" | "black";
   lowContrast?: boolean;
   size?: "regular" | "minor" | "major";