mirror of
https://github.com/versia-pub/frontend.git
synced 2025-12-06 08:28:20 +01:00
31 lines
808 B
Vue
31 lines
808 B
Vue
|
<template>
|
||
|
|
<Avatar shape="square">
|
||
|
|
<AvatarFallback v-if="name">
|
||
|
|
{{ getInitials(name) }}
|
||
|
|
</AvatarFallback>
|
||
|
|
<AvatarImage v-if="src" :src="src" />
|
||
|
|
</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>
|