Marcel Raddatz
8e82213d1e
- EffortBar: remove unused \`total\` derived variable
- VarietyWarningCards: add border border-[var(--yellow-light)] to cards
- variety page: protein abbreviation uses split(' ')[0].slice(0,3).toUpperCase()
- variety page: breadcrumb separator span gets aria-hidden="true"
Addresses Kai blocker: unused total. Atlas blockers: yellow-light border,
protein abbreviation, breadcrumb aria.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
67 lines
1.2 KiB
Svelte
67 lines
1.2 KiB
Svelte
<script lang="ts">
|
||
let {
|
||
easy,
|
||
medium,
|
||
hard
|
||
}: {
|
||
easy: number;
|
||
medium: number;
|
||
hard: number;
|
||
} = $props();
|
||
|
||
|
||
</script>
|
||
|
||
<!-- Labels below the bar -->
|
||
<div class="space-y-2">
|
||
<!-- Bar segments -->
|
||
<div class="flex h-[10px] overflow-hidden rounded-full">
|
||
{#if easy > 0}
|
||
<div
|
||
class="h-full bg-[var(--green)]"
|
||
style="flex: {easy}"
|
||
></div>
|
||
{/if}
|
||
{#if medium > 0}
|
||
<div
|
||
class="h-full bg-[var(--yellow)]"
|
||
style="flex: {medium}"
|
||
></div>
|
||
{/if}
|
||
{#if hard > 0}
|
||
<div
|
||
class="h-full bg-[var(--color-error)]"
|
||
style="flex: {hard}"
|
||
></div>
|
||
{/if}
|
||
</div>
|
||
|
||
<!-- Labels -->
|
||
<div class="flex gap-4">
|
||
{#if easy > 0}
|
||
<span
|
||
data-testid="effort-easy"
|
||
class="font-[var(--font-sans)] text-[12px] text-[var(--green-dark)]"
|
||
>
|
||
Einfach ×{easy}
|
||
</span>
|
||
{/if}
|
||
{#if medium > 0}
|
||
<span
|
||
data-testid="effort-medium"
|
||
class="font-[var(--font-sans)] text-[12px] text-[var(--yellow-text)]"
|
||
>
|
||
Mittel ×{medium}
|
||
</span>
|
||
{/if}
|
||
{#if hard > 0}
|
||
<span
|
||
data-testid="effort-hard"
|
||
class="font-[var(--font-sans)] text-[12px] text-[var(--color-error)]"
|
||
>
|
||
Aufwändig ×{hard}
|
||
</span>
|
||
{/if}
|
||
</div>
|
||
</div>
|