40 lines
1.1 KiB
Vue
40 lines
1.1 KiB
Vue
|
<template>
|
||
|
|
<img
|
||
|
|
v-if="avatarUrl"
|
||
|
|
:src="avatarUrl"
|
||
|
|
:style="style"
|
||
|
|
class="rounded-full object-cover shrink-0"
|
||
|
|
:alt="name"
|
||
|
|
/>
|
||
|
|
<div
|
||
|
|
v-else
|
||
|
|
:style="style"
|
||
|
|
class="rounded-full bg-zinc-800 flex items-center justify-center text-zinc-500 font-bold font-display shrink-0"
|
||
|
|
>
|
||
|
|
{{ name.charAt(0).toUpperCase() }}
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
// Small shared avatar block (img, or an initial-letter fallback) -- pulled
|
||
|
|
// out because M3's friends/chat UI renders many small avatars in lists,
|
||
|
|
// unlike the rest of /community which only ever renders one big one per
|
||
|
|
// page. Sized via inline style rather than a Tailwind size-N class so an
|
||
|
|
// arbitrary numeric prop doesn't depend on that exact class string
|
||
|
|
// appearing literally somewhere for Tailwind's scanner to pick up.
|
||
|
|
const props = withDefaults(
|
||
|
|
defineProps<{
|
||
|
|
avatarUrl?: string | null;
|
||
|
|
name: string;
|
||
|
|
sizePx?: number;
|
||
|
|
}>(),
|
||
|
|
{ avatarUrl: null, sizePx: 32 },
|
||
|
|
);
|
||
|
|
|
||
|
|
const style = computed(() => ({
|
||
|
|
width: `${props.sizePx}px`,
|
||
|
|
height: `${props.sizePx}px`,
|
||
|
|
fontSize: `${Math.round(props.sizePx * 0.4)}px`,
|
||
|
|
}));
|
||
|
|
</script>
|