hoppscotch/packages/hoppscotch-app/components/profile/Picture.vue

<template>
  <div class="cursor-pointer flex h-5 w-5 relative items-center justify-center">
    <img
      class="bg-primaryDark rounded-full object-cover object-center h-5 transition w-5 absolute"
      :src="url"
      :alt="alt"
      loading="lazy"
    />
    <div class="rounded-full shadow-inner inset-0 absolute"></div>
    <span
      v-if="indicator"
      class="border-primary rounded-full border-2 h-2.5 -top-0.5 -right-0.5 w-2.5 absolute"
      :class="indicatorStyles"
    ></span>
  </div>
</template>

<script>
import { defineComponent } from "@nuxtjs/composition-api"

export default defineComponent({
  props: {
    url: {
      type: String,
      default: `https://avatars.dicebear.com/v2/avataaars/${Math.random()
        .toString(36)
        .substring(7)}.svg?mood[]=happy`,
    },
    alt: {
      type: String,
      default: "Profile picture",
    },
    indicator: {
      type: Boolean,
      default: false,
    },
    indicatorStyles: {
      type: String,
      default: "bg-green-500",
    },
  },
})
</script>