Avatar

<script lang="ts">
	import { Avatar } from 'radix-svelte';
	import type { ResolvedProps } from 'radix-svelte/internal/helpers';

	let imageSrc: string = "https://avatars.githubusercontent.com/u/26071571";
	let imageAlt: string = "Thomas G. Lopes";
	let fallbackDelayMs: number;
</script>

<div class="flex gap-4">
	<Avatar.Root
		class="h-32 w-32 select-none items-center justify-center overflow-hidden rounded-full"
	>
		<Avatar.Image
			class="h-full w-full rounded-[inherit] object-cover"
			src={imageSrc}
			alt={imageAlt}
		/>
		<Avatar.Fallback
			class="flex h-full w-full items-center justify-center bg-white text-4xl font-medium text-vermilion-500"
			delayMs={fallbackDelayMs}
		>
			TGL
		</Avatar.Fallback>
	</Avatar.Root>
</div>