feat: init boring avatars (#3615)

packages/hoppscotch-ui/src/components/smart/Picture.vue

@@ -1,72 +1,38 @@
 <template>
   <div
     tabindex="0"
-    class="relative flex items-center justify-center cursor-pointer focus:outline-none focus-visible:ring focus-visible:ring-primaryDark"
-    :class="[`rounded-${rounded}`, `w-${size} h-${size}`]"
+    class="relative rounded-full flex items-center justify-center cursor-pointer focus:outline-none focus-visible:ring focus-visible:ring-primaryDark"
   >
-    <img
-      v-if="url"
-      class="absolute object-cover object-center transition bg-primaryDark"
-      :class="[`rounded-${rounded}`, `w-${size} h-${size}`]"
-      :src="url"
-      :alt="alt"
-      loading="lazy"
-      referrerpolicy="no-referrer"
+    <Avatar
+      :size="size"
+      :name="name"
+      :square="false"
+      :colors="['#FFAD08', '#EDD75A', '#73B06F', '#0C8F8F', '#405059']"
+      variant="beam"
     />
-    <div
-      v-else
-      class="absolute flex items-center justify-center object-cover object-center transition bg-primaryDark text-accentContrast"
-      :class="[`rounded-${rounded}`, `w-${size} h-${size}`]"
-      :style="`background-color: ${initial ? toHex(initial) : '#480000'}`"
-    >
-      <template v-if="initial && initial.charAt(0).toUpperCase()">
-        {{ initial.charAt(0).toUpperCase() }}
-      </template>
-      <icon-lucide-user v-else />
-    </div>
     <span
       v-if="indicator"
-      class="border-primary border-2 h-2.5 -top-0.5 -right-0.5 w-2.5 absolute"
-      :class="[`rounded-${rounded}`, indicatorStyles]"
+      class="border-primary rounded-full border-2 h-2.5 -top-0.5 -right-0.5 w-2.5 absolute"
+      :class="indicatorStyles"
     ></span>
-    <!-- w-5 h-5 rounded-lg -->
   </div>
 </template>
 
 <script setup lang="ts">
+import { Avatar } from "@boringer-avatars/vue3";
+
 withDefaults(
   defineProps<{
-    url: string
-    alt: string
+    name: string
     indicator: boolean
     indicatorStyles: string
-    rounded: string
-    size: string
-    initial: string | undefined | null
+    size: number
   }>(),
   {
-    url: "",
-    alt: "Profile picture",
+    name: "",
     indicator: false,
     indicatorStyles: "bg-green-500",
-    rounded: "full",
-    size: "5",
-    initial: "",
+    size: 24,
   }
 )
-
-const toHex = (initial: string) => {
-  let hash = 0
-  if (initial.length === 0) return hash
-  for (let i = 0; i < initial.length; i++) {
-    hash = initial.charCodeAt(i) + ((hash << 5) - hash)
-    hash = hash & hash
-  }
-  let color = "#"
-  for (let i = 0; i < 3; i++) {
-    const value = (hash >> (i * 8)) & 255
-    color += `00${value.toString(16)}`.slice(-2)
-  }
-  return color
-}
 </script>