feat(dashboard): add ContributorStack component for mission control pill stacks

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-04-19 19:06:46 +02:00
committed by marcel
parent 647a82b085
commit 4bd1ebfd1e

View File

@@ -0,0 +1,38 @@
<script lang="ts">
import type { components } from '$lib/generated/api';
type ActivityActorDTO = components['schemas']['ActivityActorDTO'];
interface Props {
contributors: ActivityActorDTO[];
hasMore: boolean;
}
let { contributors, hasMore }: Props = $props();
</script>
{#if contributors.length === 0}
<span
class="inline-block h-[22px] w-[22px] flex-shrink-0 rounded-full border-[1.5px] border-dashed border-[#cdcbbf]"
title="Noch niemand angefangen"
></span>
{:else}
<span class="inline-flex items-center">
{#each contributors as actor, i (actor.name ?? actor.initials + i)}
<span
class="inline-flex h-[22px] w-[22px] flex-shrink-0 items-center justify-center rounded-full font-sans text-[9px] font-bold text-white ring-2 ring-white {i > 0 ? '-ml-1.5' : ''}"
style="background-color: {actor.color || '#8c9aa3'};"
title={actor.name ?? ''}
>
{actor.initials}
</span>
{/each}
{#if hasMore}
<span
class="-ml-1.5 inline-flex h-[22px] w-[22px] flex-shrink-0 items-center justify-center rounded-full bg-[#e4e2d7] font-sans text-[9px] font-bold text-ink-3 ring-2 ring-white"
>
</span>
{/if}
</span>
{/if}