tethys.backend/resources/js/Components/UserAvatar.vue
Arno Kaimbacher a7142f694f
All checks were successful
CI Pipeline / japa-tests (push) Successful in 51s
- prettier formatting
- npm updates
- new SearchMap.vue component
2023-10-31 15:38:43 +01:00

38 lines
885 B
Vue

<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>