init

src/components/UserProfile.vue

@@ -0,0 +1,38 @@
+<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>
+  <div>
+    <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>email: {{ user.email }}</div>
+        <div>created at: {{ user.createdAt }}</div>
+      </div>
+    </div>
+    <v-skeleton-loader v-else type="avatar, list-item-three-line" />
+  </div>
+</template>
+
+<style scoped lang="scss"></style>