From 967be9e750221ab2ab783f95df79bb26d290a45e Mon Sep 17 00:00:00 2001
From: Martial Simon <msimon_fr@hotmail.com>
Date: Mon, 15 Sep 2025 01:07:58 +0200
Subject: add: added projects

---
 ping/frontend/src/lib/components/Avatar.svelte | 48 ++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 ping/frontend/src/lib/components/Avatar.svelte

(limited to 'ping/frontend/src/lib/components/Avatar.svelte')

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>
-- 
cgit v1.2.3