50 lines
1.5 KiB
Svelte
50 lines
1.5 KiB
Svelte
<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();
|
|
|
|
const safeContributors = $derived(contributors ?? []);
|
|
|
|
function safeColor(color: string): string {
|
|
return /^#[0-9a-fA-F]{6}$/.test(color) ? color : '#8c9aa3';
|
|
}
|
|
</script>
|
|
|
|
{#if safeContributors.length === 0}
|
|
<span
|
|
role="img"
|
|
aria-label="Noch niemand angefangen"
|
|
class="inline-block h-[22px] w-[22px] flex-shrink-0 rounded-full border-[1.5px] border-dashed border-[#cdcbbf]"
|
|
></span>
|
|
{:else}
|
|
<span class="inline-flex items-center">
|
|
{#each safeContributors as actor, i (actor.initials + '-' + actor.color)}
|
|
<span
|
|
role="img"
|
|
aria-label={actor.name ?? actor.initials}
|
|
class="inline-flex h-[22px] w-[22px] flex-shrink-0 items-center justify-center rounded-full font-sans text-[10px] font-bold text-white ring-2 ring-white {i > 0 ? '-ml-1.5' : ''}"
|
|
style="background-color: {safeColor(actor.color)};"
|
|
title={actor.name ?? actor.initials}
|
|
>
|
|
{actor.initials}
|
|
</span>
|
|
{/each}
|
|
{#if hasMore}
|
|
<span
|
|
role="img"
|
|
aria-label="Weitere Mitwirkende"
|
|
class="-ml-1.5 inline-flex h-[22px] w-[22px] flex-shrink-0 items-center justify-center rounded-full bg-[#e4e2d7] font-sans text-[10px] font-bold text-ink-3 ring-2 ring-white"
|
|
>
|
|
…
|
|
</span>
|
|
{/if}
|
|
</span>
|
|
{/if}
|