38 lines
1.4 KiB
Svelte
38 lines
1.4 KiB
Svelte
|
<script lang="ts">
|
|||
|
|
import { umsetzungInfo, type UmsetzungKategorie } from '$lib/umsetzung';
|
|||
|
|
|
|||
|
|
let { kategorie, score = null, showTooltip = true }: {
|
|||
|
|
kategorie: string | null;
|
|||
|
|
score?: number | null;
|
|||
|
|
showTooltip?: boolean;
|
|||
|
|
} = $props();
|
|||
|
|
|
|||
|
|
const info = $derived(umsetzungInfo(kategorie as UmsetzungKategorie));
|
|||
|
|
let tooltipVisible = $state(false);
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<span
|
|||
|
|
class="relative inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium cursor-help"
|
|||
|
|
style="background-color: {info.farbe}20; color: {info.farbe}; border: 1px solid {info.farbe}40;"
|
|||
|
|
onmouseenter={() => tooltipVisible = true}
|
|||
|
|
onmouseleave={() => tooltipVisible = false}
|
|||
|
|
>
|
|||
|
|
<span class="mr-1">{info.icon}</span>
|
|||
|
|
{info.label}
|
|||
|
|
{#if score !== null && score !== undefined}
|
|||
|
|
<span class="ml-1 opacity-60">({(score * 100).toFixed(0)}%)</span>
|
|||
|
|
{/if}
|
|||
|
|
|
|||
|
|
{#if showTooltip && tooltipVisible}
|
|||
|
|
<div class="absolute z-50 bottom-full left-1/2 -translate-x-1/2 mb-2 w-72 p-3 bg-gray-900 text-white text-xs rounded-lg shadow-lg pointer-events-none">
|
|||
|
|
<div class="font-bold mb-1">{info.icon} {info.label}</div>
|
|||
|
|
<div class="mb-2 leading-relaxed">{info.beschreibung}</div>
|
|||
|
|
<div class="text-gray-400 italic">Beispiel: {info.beispiel}</div>
|
|||
|
|
{#if info.score_range}
|
|||
|
|
<div class="mt-1 text-gray-400">Score: {info.score_range[0]}–{info.score_range[1]}</div>
|
|||
|
|
{/if}
|
|||
|
|
<div class="absolute top-full left-1/2 -translate-x-1/2 -mt-1 w-2 h-2 bg-gray-900 rotate-45"></div>
|
|||
|
|
</div>
|
|||
|
|
{/if}
|
|||
|
|
</span>
|