Social 5

---
import { Avatar } from "astro-ui";
---

<div class="block-social-proof">
  <div class="block-social-proof__row">
    <Avatar name="Ada Lovelace" size="xs" status="online" />
    <Avatar name="Grace Hopper" size="xs" />
    <Avatar name="Alan Turing" size="xs" />
    <Avatar name="Edsger Dijkstra" size="xs" variant="primary" />
    <Avatar name="Barbara Liskov" size="xs" />
  </div>
  <p class="block-social-proof__label">Trusted by engineers at</p>
  <p class="block-social-proof__name">Ada Lovelace, Grace Hopper, Alan Turing, and 247 more</p>
</div>

<style is:global>
  .block-social-proof { display: flex; flex-direction: column; align-items: center; gap: var(--ui-space-2); padding: var(--ui-space-6); text-align: center; }
  .block-social-proof__row { display: flex; gap: var(--ui-space-2); }
  .block-social-proof__label { margin: 0; font-size: var(--ui-text-xs); color: var(--ui-muted-foreground); text-transform: uppercase; letter-spacing: 0.05em; }
  .block-social-proof__name { margin: 0; font-size: var(--ui-text-sm); color: var(--ui-foreground); max-width: 20rem; text-align: center; }
</style>

---
import { Avatar, AvatarGroup, Tooltip } from "astro-ui";
---

<AvatarGroup hover>
  {[
    { name: "Ada Lovelace", img: "47" },
    { name: "Grace Hopper", img: "45" },
    { name: "Alan Turing", img: "12" },
    { name: "Edsger Dijkstra", img: "60" },
  ].map((a) => (
    <Tooltip ariaLabel={a.name} placement="top">
      <Fragment slot="content">{a.name}</Fragment>
      <Avatar name={a.name} src={"https://i.pravatar.cc/150?img=" + a.img} />
    </Tooltip>
  ))}
  <Fragment slot="count">+2</Fragment>
</AvatarGroup>

<style is:global>
  /* AvatarGroup hover spread is built into the component; tooltips show on hover. */
</style>

---
import { Avatar, AvatarGroup } from "astro-ui";
---

<div class="block-social-proof-label">
  <AvatarGroup>
    {["Ada Lovelace", "Grace Hopper", "Alan Turing", "Edsger Dijkstra", "Barbara Liskov"].map((name) => (
      <Avatar
        name={name}
        src={"https://i.pravatar.cc/150?img=" + (47 + ["Ada Lovelace", "Grace Hopper", "Alan Turing", "Edsger Dijkstra", "Barbara Liskov"].indexOf(name))}
        status={name === "Ada Lovelace" ? "online" : undefined}
      />
    ))}
  </AvatarGroup>
  <div class="block-social-proof-label__text">
    <p class="block-social-proof-label__headline">Joined by 2,411 developers this week</p>
    <p class="block-social-proof-label__sub">See why teams choose this stack for production Astro sites.</p>
  </div>
</div>

<style is:global>
  .block-social-proof-label { display: flex; align-items: center; gap: var(--ui-space-4); flex-wrap: wrap; }
  .block-social-proof-label__text { display: flex; flex-direction: column; gap: var(--ui-space-1); }
  .block-social-proof-label__headline { margin: 0; font-weight: var(--ui-font-semibold); color: var(--ui-foreground); font-size: var(--ui-text-base); }
  .block-social-proof-label__sub { margin: 0; color: var(--ui-muted-foreground); font-size: var(--ui-text-sm); }
</style>

---
import { Button, Avatar } from "astro-ui";
---

<div class="block-pill-buttons">
  <Button variant="outline" size="sm" shape="rounded" class="block-pill-btn">
    <Avatar name="Ada Lovelace" size="xs" />
    <span style="margin-inline-start:var(--ui-space-2)">Ada</span>
  </Button>
  <Button variant="outline" size="sm" shape="rounded" class="block-pill-btn">
    <Avatar name="Grace Hopper" size="xs" />
    <span style="margin-inline-start:var(--ui-space-2)">Grace</span>
  </Button>
  <Button variant="outline" size="sm" shape="rounded" class="block-pill-btn">
    <Avatar name="Alan Turing" size="xs" status="online" />
    <span style="margin-inline-start:var(--ui-space-2)">Alan</span>
  </Button>
</div>

<style is:global>
  .block-pill-buttons { display: flex; gap: var(--ui-space-2); flex-wrap: wrap; }
  .block-pill-btn { align-items: center; }
</style>

---
import { Avatar, AvatarGroup, Tooltip } from "astro-ui";
---

<div class="block-avatar-hover-tooltip">
  <AvatarGroup hover>
    {[
      { name: "Ada Lovelace", img: "47" },
      { name: "Grace Hopper", img: "45" },
      { name: "Alan Turing", img: "12" },
      { name: "Edsger Dijkstra", img: "60" },
      { name: "Barbara Liskov", img: "33" },
    ].map((a) => (
      <Tooltip ariaLabel={a.name} placement="bottom" variant="light">
        <Fragment slot="content">{a.name}</Fragment>
        <Avatar
          name={a.name}
          src={"https://i.pravatar.cc/150?img=" + a.img}
          ring={a.name === "Alan Turing" ? "success" : a.name === "Barbara Liskov" ? "primary" : undefined}
          status={a.name === "Ada Lovelace" ? "online" : undefined}
        />
      </Tooltip>
    ))}
    <Fragment slot="count">+3</Fragment>
  </AvatarGroup>
</div>

<style is:global>
  .block-avatar-hover-tooltip { display: inline-flex; }
  /* AvatarGroup hover spread + per-avatar tooltip on hover/focus. */
</style>