first commit

src/components/display/grid-avatar/GridAvatar.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import clsx from "clsx";
+import { Avatar, type AvatarSize } from "../avatar/Avatar";
+// import "./grid-avatar.css";
+
+
+export type GridAvatarItem = {
+  id: string;
+  title: React.ReactNode;
+  subtitle?: React.ReactNode;
+  src?: string;
+  initials?: string;
+};
+
+export function GridAvatar(props: {
+  items: GridAvatarItem[];
+  cols?: 2 | 3 | 4;
+  size?: AvatarSize;
+  className?: string;
+}) {
+  const { items, cols = 2, size = 32, className } = props;
+  return (
+    <div className={clsx("ui-gridavatar", className)} data-cols={String(cols)}>
+      {items.map((it) => (
+        <div key={it.id} className="ui-gridavatar__cell">
+          <Avatar size={size} src={it.src} initials={it.initials} />
+          <div className="ui-gridavatar__label">
+            <div className="ui-gridavatar__title">{it.title}</div>
+            {it.subtitle ? <div className="ui-gridavatar__subtitle">{it.subtitle}</div> : null}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

src/components/display/grid-avatar/grid-avatar.css

@@ -0,0 +1,12 @@
+.ui-gridavatar{
+  display: grid;
+  gap: 10px;
+}
+.ui-gridavatar[data-cols="2"]{ grid-template-columns: repeat(2, minmax(0,1fr)); }
+.ui-gridavatar[data-cols="3"]{ grid-template-columns: repeat(3, minmax(0,1fr)); }
+.ui-gridavatar[data-cols="4"]{ grid-template-columns: repeat(4, minmax(0,1fr)); }
+
+.ui-gridavatar__cell{ display: flex; align-items: center; gap: 10px; }
+.ui-gridavatar__label{ display: grid; gap: 2px; }
+.ui-gridavatar__title{ font-weight: 700; }
+.ui-gridavatar__subtitle{ font-size: 12px; color: var(--ui-muted); }