initial commit

resources/js/Components/UserAvatar.vue

@@ -0,0 +1,41 @@
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+	username: {
+		type: String,
+		required: true,
+	},
+	avatar: {
+		type: String,
+		default: null,
+	},
+	api: {
+		type: String,
+		default: 'avataaars',
+	},
+});
+
+const avatar = computed(
+	// () => props.avatar ?? `https://avatars.dicebear.com/api/${props.api}/${props.username?.replace(/[^a-z0-9]+/i, '-')}.svg`
+
+	() => props.avatar ?? `https://avatars.dicebear.com/api/initials/${props.username}.svg`
+
+	// () => {
+
+	//   return props.avatar ?? `https://www.gravatar.com/avatar/${props.username}?s=50`;
+	// }
+);
+
+const username = computed(() => props.username);
+</script>
+
+<template>
+	<div>
+		<img
+			:src="avatar"
+			:alt="username"
+			class="rounded-full block h-auto w-full max-w-full bg-gray-100 dark:bg-slate-800"
+		/>
+	</div>
+</template>