Avatar

<script setup lang="ts">
import { VMenu, VMenuItem, VButton, VAvatar, VIcon } from '@vonage/vivid-api-vue';
</script>

<template>
  <VMenu aria-label="Menu example" placement="bottom-start">
    <VButton slot="anchor" label="Select a User's avatar" appearance="outlined" dropdown-indicator size="expanded">
      <VAvatar slot="icon" shape="pill" size="condensed">
        <template #icon><VIcon name="user-line" label="User's avatar" /></template>
      </VAvatar>
    </VButton>

      <VMenuItem text="Stone John" control-type="radio" check-appearance="tick-only" text-secondary="236521">
        <VAvatar slot="meta" size="condensed" shape="pill">
          <template #icon><VIcon name="user-line" label="User's avatar" /></template>
        </VAvatar>
      </VMenuItem>

      <VMenuItem text="Stanbrige Peter" control-type="radio" check-appearance="tick-only" text-secondary="963851">
        <VAvatar slot="meta" size="condensed" shape="pill">
          <template #icon><VIcon name="user-line" label="User's avatar" /></template>
        </VAvatar>
      </VMenuItem>

      <VMenuItem text="Kazantzis John" control-type="radio" check-appearance="tick-only" text-secondary="784632">
        <VAvatar slot="meta" size="condensed" shape="pill">
          <template #icon><VIcon name="user-line" label="User's avatar" /></template>
        </VAvatar>
      </VMenuItem>
    </VMenu>

</template>

<vwc-menu aria-label="Menu example" placement="bottom-start">
  <vwc-button slot="anchor" label="Select a User's avatar" appearance="outlined" dropdown-indicator size="expanded">
    <vwc-avatar slot="icon" shape="pill" size="condensed">
      {' '}
      <vwc-icon slot="icon" name="user-line" label="User's avatar"></vwc-icon>
    </vwc-avatar>
  </vwc-button>
  <vwc-menu-item text="Stone John" control-type="radio" check-appearance="tick-only" text-secondary="236521">
    <vwc-avatar slot="meta" size="condensed" shape="pill">
      {' '}
      <vwc-icon slot="icon" name="user-line" label="User's avatar"></vwc-icon>
    </vwc-avatar>
  </vwc-menu-item>
  <vwc-menu-item text="Stanbrige Peter" control-type="radio" check-appearance="tick-only" text-secondary="963851">
    <vwc-avatar slot="meta" size="condensed" shape="pill">
      {' '}
      <vwc-icon slot="icon" name="user-line" label="User's avatar"></vwc-icon>
    </vwc-avatar>
  </vwc-menu-item>
  <vwc-menu-item text="Kazantzis John" control-type="radio" check-appearance="tick-only" text-secondary="784632">
    <vwc-avatar slot="meta" size="condensed" shape="pill">
      {' '}
      <vwc-icon slot="icon" name="user-line" label="User's avatar"></vwc-icon>
    </vwc-avatar>
  </vwc-menu-item>
</vwc-menu>

<script setup lang="ts">
import { VMenu, VMenuItem, VAvatar, VBadge, VIcon } from '@vonage/vivid-api-vue';
</script>

<template>
  <VMenu aria-label="Menu example" placement="right-start">
    <VAvatar slot="anchor" shape="pill" aria-label="See user details" class="avatar-status" clickable>
      <template #icon><VIcon name="user-line" label="User's avatar" /></template>
    </VAvatar>

      <VMenuItem text="Available">
        <VBadge slot="meta" appearance="filled" connotation="success" shape="pill">
          <template #icon><VIcon name="check-solid" /></template>
        </VBadge>
      </VMenuItem>

      <VMenuItem text="Away">
        <VBadge slot="meta" appearance="filled" connotation="warning" shape="pill">
          <template #icon><VIcon name="clock-line" /></template>
        </VBadge>
      </VMenuItem>

      <VMenuItem text="Busy">
        <VBadge slot="meta" appearance="filled" connotation="alert" shape="pill">
          <template #icon><VIcon name="minus-solid" /></template>
        </VBadge>
      </VMenuItem>
    </VMenu>

</template>

<style scoped>
.avatar-status {
  position: relative;
  display: inline-block;
}
.avatar-status::after {
  position: absolute;
  content: '';
  inline-size: 14px;
  aspect-ratio: 1;
  bottom: -2px;
  background-color: var(--vvd-color-alert-500);
  border-radius: 50%;
  right: -2px;
}
</style>

<vwc-menu aria-label="Menu example" placement="right-start">
  <vwc-avatar slot="anchor" shape="pill" aria-label="See user details" class="avatar-status" clickable>
    <vwc-icon slot="icon" name="user-line" label="User's avatar"></vwc-icon>
  </vwc-avatar>
  <vwc-menu-item text="Available">
    <vwc-badge slot="meta" appearance="filled" connotation="success" shape="pill">
      <vwc-icon slot="icon" name="check-solid"></vwc-icon>
    </vwc-badge>
  </vwc-menu-item>
  <vwc-menu-item text="Away">
    <vwc-badge slot="meta" appearance="filled" connotation="warning" shape="pill">
      <vwc-icon slot="icon" name="clock-line"></vwc-icon>
    </vwc-badge>
  </vwc-menu-item>
  <vwc-menu-item text="Busy">
    <vwc-badge slot="meta" appearance="filled" connotation="alert" shape="pill">
      <vwc-icon slot="icon" name="minus-solid"></vwc-icon>
    </vwc-badge>
  </vwc-menu-item>
</vwc-menu>

<style>
  .avatar-status {
    position: relative;
    display: inline-block;
  }
  .avatar-status::after {
    position: absolute;
    content: '';
    inline-size: 14px;
    aspect-ratio: 1;
    bottom: -2px;
    background-color: var(--vvd-color-alert-500);
    border-radius: 50%;
    right: -2px;
  }
</style>