42 lines
944 B
Vue
42 lines
944 B
Vue
<script setup lang="ts">
|
|
import type { Actor } from '~/types'
|
|
|
|
import { hashCode, intToRGB } from '~/utils/color'
|
|
import { computed } from 'vue'
|
|
|
|
interface Props {
|
|
actor: { full_username : string; preferred_username?:string; icon?:Actor["icon"] }
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
|
|
const actorColor = computed(() => intToRGB(hashCode(props.actor.full_username)))
|
|
const defaultAvatarStyle = computed(() => ({ backgroundColor: `#${actorColor.value}` }))
|
|
</script>
|
|
|
|
<template>
|
|
<img
|
|
v-if="actor.icon && actor.icon.urls.original"
|
|
alt=""
|
|
:src="actor.icon.urls.medium_square_crop"
|
|
class="ui avatar circular image"
|
|
>
|
|
<span
|
|
v-else
|
|
:style="defaultAvatarStyle"
|
|
class="ui avatar circular label"
|
|
>{{ actor.preferred_username?.[0] || "" }}</span>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.ui.circular.avatar {
|
|
float: left;
|
|
text-align: center;
|
|
border-radius: 50%;
|
|
|
|
&.label {
|
|
align-content: center;
|
|
}
|
|
}
|
|
</style>
|