chore: import upstream snapshot with attribution

2026-07-13 13:32:57 +08:00
commit cd420f9332
4811 changed files with 884702 additions and 0 deletions
@@ -0,0 +1,39 @@
+import {
+  Avatar,
+  avatarIcons,
+  defaultAvatarColors,
+  type IconAvatar,
+} from "~/components/primitives/Avatar";
+
+// Map tablerIcons Set to Avatar array with cycling colors
+const avatars: IconAvatar[] = Object.entries(avatarIcons).map(([iconName], index) => ({
+  type: "icon",
+  name: iconName,
+  hex: defaultAvatarColors[index % defaultAvatarColors.length].hex, // Cycle through colors
+}));
+
+export default function Story() {
+  return (
+    <div className="flex h-full gap-12 bg-black p-12">
+      {/* Left grid - size-8 */}
+      <div className="flex-1">
+        <h2 className="mb-4 text-lg font-semibold text-white">Size 8</h2>
+        <div className="flex flex-wrap gap-2">
+          {avatars.map((avatar, index) => (
+            <Avatar key={`small-${index}`} avatar={avatar} size={2} orgName={`Org ${index}`} />
+          ))}
+        </div>
+      </div>
+
+      {/* Right grid - size-12 */}
+      <div className="flex-1">
+        <h2 className="mb-4 text-lg font-semibold text-white">Size 12</h2>
+        <div className="flex flex-wrap gap-4">
+          {avatars.map((avatar, index) => (
+            <Avatar key={`large-${index}`} avatar={avatar} size={3} orgName={`Org ${index}`} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}