<template>
  <div class="vp-raw flex justify-center space-x-4">
    <fwb-avatar
      img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
      status-position="top-left"
      status="online"
    />
    <fwb-avatar
      img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
      rounded
      status-position="top-left"
      status="online"
    />
    <fwb-avatar
      img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
      status-position="top-right"
      status="online"
    />
    <fwb-avatar
      img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
      rounded
      status-position="top-right"
      status="online"
    />
    <fwb-avatar
      img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
      status-position="bottom-left"
      status="online"
    />
    <fwb-avatar
      img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
      rounded
      status-position="bottom-left"
      status="online"
    />
    <fwb-avatar
      img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
      status-position="bottom-right"
      status="online"
    />
    <fwb-avatar
      img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
      rounded
      status-position="bottom-right"
      status="online"
    />
  </div>
</template>

<script setup>
import { FwbAvatar } from '../../../../src/index'
</script>
