Eli Ribble
f88ca57d97
This makes it possible to start hydrating the types into valid data types like Dates which means I can get type safety guarantees when displaying information.
31 lines
473 B
Vue
31 lines
473 B
Vue
<style scoped>
|
|
.avatar {
|
|
width: 48px;
|
|
height: 48px;
|
|
object-fit: cover;
|
|
}
|
|
.bi-avatar {
|
|
height: 48px;
|
|
width: 48px;
|
|
}
|
|
</style>
|
|
<template>
|
|
<img
|
|
v-if="user.avatar"
|
|
:src="user.avatar"
|
|
:alt="user.display_name"
|
|
class="rounded-circle me-2 avatar"
|
|
width="32"
|
|
height="32"
|
|
/>
|
|
<i v-else class="bi bi-avatar"></i>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { User } from "@/type/api";
|
|
|
|
interface Props {
|
|
user: User;
|
|
}
|
|
const props = defineProps<Props>();
|
|
</script>
|