42 lines
1018 B
Svelte
42 lines
1018 B
Svelte
<script lang="ts">
|
|
import { getAvatarUrl as generateAvatarUrl } from "$lib/utils/avatarGenerator";
|
|
|
|
interface Props {
|
|
avatar?: string;
|
|
fotoPerfilUrl?: string | null;
|
|
nome: string;
|
|
size?: "xs" | "sm" | "md" | "lg";
|
|
}
|
|
|
|
let { avatar, fotoPerfilUrl, nome, size = "md" }: Props = $props();
|
|
|
|
const sizeClasses = {
|
|
xs: "w-8 h-8",
|
|
sm: "w-10 h-10",
|
|
md: "w-12 h-12",
|
|
lg: "w-16 h-16",
|
|
};
|
|
|
|
function getAvatarUrl(avatarId: string): string {
|
|
// Usar gerador local ao invés da API externa
|
|
return generateAvatarUrl(avatarId);
|
|
}
|
|
|
|
const avatarUrlToShow = $derived(() => {
|
|
if (fotoPerfilUrl) return fotoPerfilUrl;
|
|
if (avatar) return getAvatarUrl(avatar);
|
|
return getAvatarUrl(nome); // Fallback usando o nome
|
|
});
|
|
</script>
|
|
|
|
<div class="avatar">
|
|
<div class={`${sizeClasses[size]} rounded-full bg-base-200 overflow-hidden`}>
|
|
<img
|
|
src={avatarUrlToShow()}
|
|
alt={`Avatar de ${nome}`}
|
|
class="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|