feat: count badge

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": {

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 {

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>
   );
 }

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);
+}

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}
+    />
+  );
+}

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";