Nikolay Tatarinov
8f769543f4
- Updated frontend-nuxt.mdc to specify usage of composables for API calls. - Added new AuthCard and ConfirmModal components for improved UI consistency. - Introduced UserAvatar component for user profile display, replacing previous Gravatar implementation. - Implemented useFormSubmit composable for handling form submissions with loading and error states. - Enhanced vitest.config.ts to include coverage reporting for composables and components. - Removed deprecated useAdminApi and useAuth composables to streamline API interactions. - Updated login and setup pages to utilize new components and composables for better user experience.
43 lines
1.0 KiB
Vue
43 lines
1.0 KiB
Vue
<template>
|
|
<div class="avatar">
|
|
<div
|
|
class="rounded-full overflow-hidden flex items-center justify-center shrink-0"
|
|
:style="{ width: `${size}px`, height: `${size}px` }"
|
|
>
|
|
<img
|
|
v-if="email && !gravatarError"
|
|
:src="useGravatarUrl(email, size)"
|
|
alt=""
|
|
class="w-full h-full object-cover"
|
|
@error="gravatarError = true"
|
|
>
|
|
<div
|
|
v-else
|
|
class="bg-primary text-primary-content rounded-full w-full h-full flex items-center justify-center"
|
|
:class="initialClass"
|
|
>
|
|
<span>{{ (username || '?')[0].toUpperCase() }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
username: string
|
|
email?: string
|
|
size?: number
|
|
}>(),
|
|
{ size: 32 }
|
|
)
|
|
|
|
const gravatarError = ref(false)
|
|
|
|
const initialClass = computed(() => {
|
|
if (props.size <= 32) return 'text-sm'
|
|
if (props.size <= 40) return 'text-sm'
|
|
return 'text-2xl font-semibold'
|
|
})
|
|
</script>
|