44 lines
816 B
Svelte
44 lines
816 B
Svelte
<script lang="ts">
|
|
import { User } from 'lucide-svelte';
|
|
|
|
interface Props {
|
|
fotoPerfilUrl?: string | null;
|
|
nome: string;
|
|
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
}
|
|
|
|
let { 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',
|
|
xl: 'w-32 h-32'
|
|
};
|
|
|
|
const iconSizes = {
|
|
xs: 16,
|
|
sm: 20,
|
|
md: 24,
|
|
lg: 32,
|
|
xl: 64
|
|
};
|
|
</script>
|
|
|
|
<div class="avatar placeholder">
|
|
<div
|
|
class={`${sizeClasses[size]} bg-base-200 text-base-content/50 flex items-center justify-center overflow-hidden rounded-full`}
|
|
>
|
|
{#if fotoPerfilUrl}
|
|
<img
|
|
src={fotoPerfilUrl}
|
|
alt={`Foto de perfil de ${nome}`}
|
|
class="h-full w-full object-cover"
|
|
/>
|
|
{:else}
|
|
<User size={iconSizes[size]} />
|
|
{/if}
|
|
</div>
|
|
</div>
|