frontend/components/profiles/avatar.vue
Jesse Wierzbinski 3ce71dd4df
Some checks failed
Mirror to Codeberg / Mirror (push) Failing after 0s
feat: Wire up new preferences and remove old settings
2025-04-30 18:03:14 +02:00

32 lines
857 B
Vue

<template>
<Avatar :class="['rounded-md bg-secondary']">
<AvatarFallback v-if="name">
{{ getInitials(name) }}
</AvatarFallback>
<AvatarImage v-if="src" :src="src" :alt="`${name}'s avatar`" />
</Avatar>
</template>
<script lang="ts" setup>
import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
const { name } = defineProps<{
src?: string;
name?: string;
}>();
/**
* Gets the initials of any string, even if it's not a name.
* If not a name, it will return the first two characters.
* @param name
*/
const getInitials = (name: string): string => {
const initials = name.match(/\b\w/g) || [];
const firstLetter = initials.shift() || name[0] || "";
const secondLetter = initials.pop() || name[1] || "";
return `${firstLetter}${secondLetter}`.toUpperCase();
};
</script>