39 lines
906 B
Vue
39 lines
906 B
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
|
|
interface Props {
|
|
user?: {
|
|
readonly id: string
|
|
readonly createdAt: Date
|
|
readonly updatedAt: Date
|
|
readonly email: string
|
|
readonly emailVerified: boolean
|
|
readonly name: string
|
|
readonly image?: string | null | undefined
|
|
}
|
|
}
|
|
|
|
const { user } = defineProps<Props>()
|
|
|
|
const avatar = computed(() => {
|
|
return user?.image ?? undefined
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<v-sheet border class="pa-4 d-flex flex-column ga-2">
|
|
<div v-if="user" class="d-flex ga-4">
|
|
<v-avatar size="x-large" color="info" :image="avatar" />
|
|
|
|
<div>
|
|
<div>Name: {{ user.name }}</div>
|
|
<div>E-mail: {{ user.email }}</div>
|
|
<div>Created At: {{ user.createdAt }}</div>
|
|
</div>
|
|
</div>
|
|
<v-skeleton-loader v-else type="avatar, list-item-three-line" />
|
|
</v-sheet>
|
|
</template>
|
|
|
|
<style scoped lang="scss"></style>
|