vue components refactoring

resources/js/components/UI/Others/MemberAvatar.vue

@@ -0,0 +1,72 @@
+<template>
+    <div class="shrink-0 grow-0">
+        <img
+            :style="{ width: size + 'px', height: size + 'px' }"
+            v-if="member.data.attributes.avatar"
+            :src="avatar"
+            :class="[
+                borderRadius,
+                {
+                    'border-3 border-white dark:border-dark-background': isBorder,
+                },
+            ]"
+            class="object-cover mx-auto"
+        />
+        <div
+            v-else
+            class="flex items-center justify-center mx-auto"
+            :class="[
+                borderRadius,
+                {
+                    'border-3 border-white dark:border-dark-background': isBorder,
+                    'dark:bg-4x-dark-foreground bg-light-background': !member.data.attributes.color,
+                },
+            ]"
+            :style="{
+                width: size + 'px',
+                height: size + 'px',
+                background: member.data.attributes.color ? member.data.attributes.color : '',
+            }"
+        >
+            <span :class="fontSize" class="font-extrabold uppercase text-white">
+                {{ letter }}
+            </span>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    name: 'MemberAvatar',
+    props: ['isBorder', 'member', 'size'],
+    computed: {
+        letter() {
+            let string = this.member.data.attributes.name
+                ? this.member.data.attributes.name
+                : this.member.data.attributes.email
+
+            return string.substr(0, 1)
+        },
+        borderRadius() {
+            return this.size > 32 ? 'rounded-xl' : 'rounded-lg'
+        },
+        fontSize() {
+            if (this.size > 42) {
+                return 'text-lg'
+            } else if (this.size > 32) {
+                return 'text-base'
+            } else {
+                return 'text-sm'
+            }
+        },
+        avatar() {
+            if (this.size >= 52) {
+                return this.member.data.attributes.avatar.md
+            } else if (this.size > 32) {
+                return this.member.data.attributes.avatar.sm
+            } else {
+                return this.member.data.attributes.avatar.xs
+            }
+        },
+    },
+}
+</script>