1 files changed, 48 insertions, 0 deletions
diff --git a/ping/frontend/src/lib/components/Avatar.svelte b/ping/frontend/src/lib/components/Avatar.svelte
new file mode 100644
index 0000000..c04b563
--- /dev/null
+++ b/ping/frontend/src/lib/components/Avatar.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+	let showTooltip = $state(false);
+
+	interface Props {
+		username?: string;
+		url?: string;
+		onclick?: () => void;
+	}
+
+	let { username = 'lolo', url = '/img/default-avatar.png', onclick = () => {} }: Props = $props();
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<div style="position: relative; display: inline-block;">
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<img
+		src={url ?? '/img/default-avatar.png'}
+		onmouseenter={() => (showTooltip = true)}
+		onmouseleave={() => (showTooltip = false)}
+		{onclick}
+		alt="User Avatar"
+	/>
+	{#if showTooltip}
+		<div class="tooltip">{username}</div>
+	{/if}
+</div>
+
+<style>
+	img {
+		width: 48px;
+		height: 48px;
+		border-radius: 50%;
+	}
+	.tooltip {
+		position: absolute;
+		top: 110%;
+		left: 50%;
+		transform: translateX(-50%);
+		background: #333;
+		color: #fff;
+		padding: 4px 8px;
+		border-radius: 4px;
+		white-space: nowrap;
+		font-size: 0.9em;
+		z-index: 1;
+		pointer-events: none;
+	}
+</style>