AvatarStack

const avatarStackFixture = {
  id: "avatar-stack",
  label: "On-call team",
  avatars: [
    { name: "Ada Lovelace", initials: "AL" },
    { name: "Grace Hopper", initials: "GH" },
    { name: "Margaret Hamilton", initials: "MH" },
  ],
} satisfies {
  id: string;
  label: string;
  avatars: Array<{ name: string; initials: string }>;
};
 
import { Avatar, AvatarStack } from "@grassroot/ui-react";
 
export default function AvatarStackDemo() {
  return (
    <div>
      <AvatarStack aria-label={avatarStackFixture.label}>
        {avatarStackFixture.avatars.map((avatar) => (
          <Avatar key={avatar.name} name={avatar.name} initials={avatar.initials} />
        ))}
      </AvatarStack>
    </div>
  );
}

<script setup lang="ts">
const avatarStackFixture = {
  id: "avatar-stack",
  label: "On-call team",
  avatars: [
    { name: "Ada Lovelace", initials: "AL" },
    { name: "Grace Hopper", initials: "GH" },
    { name: "Margaret Hamilton", initials: "MH" },
  ],
} satisfies {
  id: string;
  label: string;
  avatars: Array<{ name: string; initials: string }>;
};
 
import { AvatarStack, Avatar } from "@grassroot/ui-vue";
</script>
 
<template>
  <div>
    <AvatarStack :aria-label="avatarStackFixture.label">
      <Avatar
        v-for="avatar in avatarStackFixture.avatars"
        :key="avatar.name"
        :name="avatar.name"
        :initials="avatar.initials"
      />
    </AvatarStack>
  </div>
</template>

import { Component } from "@angular/core";
const avatarStackFixture = {
  id: "avatar-stack",
  label: "On-call team",
  avatars: [
    { name: "Ada Lovelace", initials: "AL" },
    { name: "Grace Hopper", initials: "GH" },
    { name: "Margaret Hamilton", initials: "MH" },
  ],
} satisfies {
  id: string;
  label: string;
  avatars: Array<{ name: string; initials: string }>;
};
 
import { GrassrootAvatarStack, GrassrootAvatar } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-avatar-stack-demo",
  standalone: true,
  imports: [GrassrootAvatarStack, GrassrootAvatar],
  template: `
    <div>
      <grassroot-avatar-stack [attr.aria-label]="fixture.label">
        @for (avatar of fixture.avatars; track avatar.name) {
          <grassroot-avatar [name]="avatar.name" [initials]="avatar.initials" />
        }
      </grassroot-avatar-stack>
    </div>
  `,
})
export class AvatarStackDemoComponent {
  protected readonly fixture = avatarStackFixture;
}
 
export default AvatarStackDemoComponent;

<script lang="ts">
  const avatarStackFixture = {
    id: "avatar-stack",
    label: "On-call team",
    avatars: [
      { name: "Ada Lovelace", initials: "AL" },
      { name: "Grace Hopper", initials: "GH" },
      { name: "Margaret Hamilton", initials: "MH" },
    ],
  } satisfies {
    id: string;
    label: string;
    avatars: Array<{ name: string; initials: string }>;
  };
 
  import { AvatarStack, Avatar } from "@grassroot/ui-svelte";
</script>
 
<div>
  <AvatarStack aria-label={avatarStackFixture.label}>
    {#each avatarStackFixture.avatars as avatar (avatar.name)}
      <Avatar name={avatar.name} initials={avatar.initials} />
    {/each}
  </AvatarStack>
</div>

/** @jsxImportSource solid-js */
import { Avatar, AvatarStack } from "@grassroot/ui-solid";
const avatarStackFixture = {
  id: "avatar-stack",
  label: "On-call team",
  avatars: [
    { name: "Ada Lovelace", initials: "AL" },
    { name: "Grace Hopper", initials: "GH" },
    { name: "Margaret Hamilton", initials: "MH" },
  ],
} satisfies {
  id: string;
  label: string;
  avatars: Array<{ name: string; initials: string }>;
};
 
import type { JSX } from "solid-js";
 
export default function AvatarStackDemo(): JSX.Element {
  return (
    <div>
      <AvatarStack aria-label={avatarStackFixture.label}>
        {avatarStackFixture.avatars.map((avatar) => (
          <Avatar name={avatar.name} initials={avatar.initials} />
        ))}
      </AvatarStack>
    </div>
  );
}