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:
38
frontend/src/lib/components/ContributorStack.svelte
Normal file
38
frontend/src/lib/components/ContributorStack.svelte
Normal 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}
|
||||
Reference in New Issue
Block a user