Avatar

import { MtAvatar } from '@/components/icons-media/mt-avatar/mt-avatar.vue';

<template>
  <mt-avatar 
    first-name="John" 
    last-name="Doe" 
  />
</template>

<template>
  <mt-avatar 
    first-name="Jane"
    last-name="Smith"
    image-url="https://example.com/avatar.jpg"
  />
</template>

<template>
  <div style="display: flex; gap: 12px; align-items: center;">
    <mt-avatar size="2xs" first-name="John" last-name="Doe" />
    <mt-avatar size="xs" first-name="John" last-name="Doe" />
    <mt-avatar size="s" first-name="John" last-name="Doe" />
    <mt-avatar size="m" first-name="John" last-name="Doe" />
    <mt-avatar size="l" first-name="John" last-name="Doe" />
  </div>
</template>

<template>
  <mt-avatar 
    variant="square"
    first-name="Sarah" 
    last-name="Johnson"
  />
</template>

<template>
  <mt-avatar size="l">
    <mt-icon name="solid-user" />
  </mt-avatar>
</template>

<template>
  <div style="display: flex; margin-left: -8px;">
    <mt-avatar 
      v-for="user in users" 
      :key="user.id"
      :first-name="user.firstName"
      :last-name="user.lastName"
      :image-url="user.avatar"
      style="margin-left: -8px; border: 2px solid white;"
    />
  </div>
</template>

<script setup>
const users = [
  { id: 1, firstName: 'John', lastName: 'Doe', avatar: null },
  { id: 2, firstName: 'Jane', lastName: 'Smith', avatar: null },
  { id: 3, firstName: 'Bob', lastName: 'Wilson', avatar: null },
];
</script>

<template>
  <mt-avatar 
    first-name="Alex"
    last-name="Brown"
    :image-url="avatarUrl"
  />
</template>

<script setup>
import { ref } from 'vue';

// If image fails to load, initials will be shown automatically
const avatarUrl = ref('https://example.com/invalid-image.jpg');
</script>