feat: Add user profile avatar (#9298)

* feat: add avatar

* chore: add more colors

* chore: add helpers

* chore: build prettier issues

* chore: refactor shouldShowImage

* chore: code cleanup

* Update app/javascript/v3/components/Form/InitialsAvatar.vue

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

* chore: revire comments

---------

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

app/javascript/v3/components/Form/InitialsAvatar.vue

@@ -0,0 +1,43 @@
+<template>
+  <div
+    class="rounded-xl flex leading-[100%] font-medium items-center justify-center text-center cursor-default"
+    :class="`h-[${size}px] w-[${size}px] ${colorClass}`"
+    :style="style"
+    aria-hidden="true"
+  >
+    <slot>{{ initial }}</slot>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { userInitial } from 'v3/helpers/CommonHelper';
+const colors = {
+  1: 'bg-ash-200 text-ash-900',
+  2: 'bg-amber-200 text-amber-900',
+  3: 'bg-pink-100 text-pink-800',
+  4: 'bg-purple-100 text-purple-800',
+  5: 'bg-indigo-100 text-indigo-800',
+  6: 'bg-grass-100 text-grass-800',
+  7: 'bg-mint-100 text-mint-800',
+  8: 'bg-orange-100 text-orange-800',
+};
+const props = defineProps({
+  name: {
+    type: String,
+    default: '',
+  },
+  size: {
+    type: Number,
+    default: 72,
+  },
+});
+const style = computed(() => ({
+  fontSize: `${Math.floor(props.size / 2.5)}px`,
+}));
+const colorClass = computed(() => {
+  return colors[(props.name.length % 8) + 1];
+});
+
+const initial = computed(() => userInitial(props.name));
+</script>