src/components/ui/Avatar.astro
---
// Avatar, recovered from blurr-components.pages.dev
---
<div class="preview-wrapper--centered"> <div style="display:flex;flex-direction:column;gap:1.5rem;align-items:center"> <div style="display:flex;gap:1rem;align-items:center"> <!-- Single Avatar -->
<div class="av av--xl av--status-online" data-component="avatar" title="Mark Visscher"><img data-allow-img src="/img/ext/photo-1507003211169-0a1dd7228f2d-w200-4cb784.jpg" alt="Mark Visscher" class="av__img" loading="lazy" decoding="async" ><span class="av__status" aria-label="online"></span></div> <!-- Single Avatar -->
<div class="av av--lg av--status-away" data-component="avatar" title="Lisa Hoekstra"><img data-allow-img src="/img/ext/photo-1438761681033-6461ffad8d80-w200-27d675.jpg" alt="Lisa Hoekstra" class="av__img" loading="lazy" decoding="async" ><span class="av__status" aria-label="away"></span></div> <!-- Single Avatar -->
<div class="av av--md av--status-busy" data-component="avatar" title="Pieter Janssen"><span class="av__initials" style="background:#f59e0b">PJ</span><span class="av__status" aria-label="busy"></span></div> <!-- Single Avatar -->
<div class="av av--sm" data-component="avatar" title="Anna de Vries"><span class="av__initials" style="background:#ec4899">AD</span></div> <!-- Single Avatar -->
<div class="av av--xs" data-component="avatar" title="X"><span class="av__initials" style="background:#10b981">X</span></div> </div> <!-- AvatarGroup -->
<div class="av-group av-group--md" data-component="avatar-group"><div class="av av--group" title="Mark Visscher"><img data-allow-img src="/img/ext/photo-1507003211169-0a1dd7228f2d-w200-4cb784.jpg" alt="Mark Visscher" class="av__img" loading="lazy" decoding="async" ></div><div class="av av--group" title="Lisa Hoekstra"><img data-allow-img src="/img/ext/photo-1438761681033-6461ffad8d80-w200-27d675.jpg" alt="Lisa Hoekstra" class="av__img" loading="lazy" decoding="async" ></div><div class="av av--group" title="Pieter Janssen"><span class="av__initials" style="background:#f59e0b">PJ</span></div><div class="av av--group" title="Anna de Vries"><span class="av__initials" style="background:#ec4899">AD</span></div><div class="av av--overflow av--group"><span class="av__overflow-count">+1</span></div></div> </div> </div>
<style>
,:before,:after{box-sizing:border-box;margin:0;padding:0}
.preview-wrapper--centered{display:flex;align-items:center;justify-content:center;min-height:200px;padding:2rem;background:#f9f9fb}
</style>