Avatar experimental

<script lang="ts">
  import * as Avatar from '@odbd/svelte/avatar'

  interface Person {
    name: string
    initials: string
    role: string
    src?: string
  }

  function profileImage(label: string, background: string) {
    const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96"><rect width="96" height="96" rx="48" fill="${background}"/><text x="48" y="55" text-anchor="middle" font-family="Arial, sans-serif" font-size="28" font-weight="700" fill="white">${label}</text></svg>`

    return `data:image/svg+xml,${encodeURIComponent(svg)}`
  }

  const people: Person[] = [
    {
      name: '정민',
      initials: '정민',
      src: profileImage('정', '#2563eb'),
      role: '시스템 운영',
    },
    {
      name: '수아',
      initials: '수아',
      role: '디자인 시스템',
    },
    {
      name: '도윤',
      initials: '도',
      src: profileImage('도', '#0f766e'),
      role: '제품 개발',
    },
  ]
</script>

<div class="avatar-demo">
  {#each people as person}
    <div class="avatar-demo__item">
      <Avatar.Root data-size="md">
        <Avatar.Fallback>{person.initials}</Avatar.Fallback>
        {#if person.src}
          <Avatar.Image src={person.src} alt={`${person.name} 프로필`} />
        {/if}
      </Avatar.Root>
      <div class="avatar-demo__meta">
        <strong>{person.name}</strong>
        <span>{person.role}</span>
      </div>
    </div>
  {/each}
</div>

<style>
  .avatar-demo {
    display: grid;
    width: min(100%, 30rem);
    gap: var(--odbd-space-3);
  }

  .avatar-demo__item {
    display: flex;
    align-items: center;
    gap: var(--odbd-space-3);
  }

  .avatar-demo__meta {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--odbd-space-1);
  }

  .avatar-demo__meta strong {
    color: var(--odbd-color-foreground);
    font-size: var(--odbd-font-size-md);
  }

  .avatar-demo__meta span {
    color: var(--odbd-color-muted-foreground);
    font-size: var(--odbd-font-size-sm);
  }
</style>