Team member preview refactoring

resources/js/components/FilesView/MemberAvatar.vue

@@ -1,31 +1,44 @@
 <template>
-	<div class="user-preview">
+	<div>
 		<img
 			:style="{width: size + 'px', height: size + 'px'}"
 			v-if="member.data.attributes.avatar"
 			:src="member.data.attributes.avatar"
 			:alt="member.data.attributes.name"
-			class="rounded-xl border-4 border-white"
+			:class="[borderRadius, {'border-3 border-white': isBorder}]"
+			class=""
 		>
-		<TypedAvatar
+		<div
 			v-else
-			:size="size"
-			:letter="member.data.attributes.name.substr(0, 1)"
-			:color="member.data.attributes.color"
-		/>
+			class="flex items-center justify-center"
+			:class="[borderRadius, {'border-3 border-white': isBorder}]"
+			:style="{width: size + 'px', height: size + 'px', background: member.data.attributes.color ? member.data.attributes.color : '#f4f5f6'}"
+		>
+			<span :class="fontSize" class="uppercase font-extrabold">
+				{{ letter }}
+			</span>
+		</div>
 	</div>
 </template>
 <script>
-	import TypedAvatar from "../Others/TypedAvatar"
 
 	export default {
 		name: 'MemberAvatar',
 		props: [
+			'isBorder',
 			'member',
 			'size',
 		],
-		components: {
-			TypedAvatar,
-		},
+		computed: {
+			letter() {
+				return this.member.data.attributes.name.substr(0, 1)
+			},
+			borderRadius() {
+				return this.size > 32 ? 'rounded-xl' : 'rounded-lg'
+			},
+			fontSize() {
+				return this.size > 32 ? 'text-base' : 'text-sm'
+			},
+		}
 	}
 </script>