alice.pds.demo.boltless.dev
This repository has no description
1<script lang="ts">
2 import type { ReactionGroup } from "./reactions";
3
4 interface Props {
5 reaction: ReactionGroup;
6 ontoggle?: () => void; // null for loggedout users
7 pending?: boolean;
8 }
9
10 let { reaction, ontoggle, pending = false }: Props = $props();
11
12 const MAX_NAMES = 10;
13 const title = $derived.by(() => {
14 const shown = reaction.users.slice(0, MAX_NAMES);
15 const more = reaction.count - shown.length;
16 const names = shown.join(", ");
17 return more > 0 ? `${names}, and ${more} more` : names;
18 });
19
20 const chipClass = $derived(
21 `flex min-h-6 items-center justify-center gap-1.5 rounded border px-2 typography-paragraph-mini leading-4 text-foreground-default ${
22 reaction.isReacted
23 ? "border-border-strong bg-background-info-subtle"
24 : "border-border-default"
25 }`
26 );
27</script>
28
29{#if ontoggle}
30 <button
31 type="button"
32 {title}
33 disabled={pending}
34 aria-pressed={reaction.isReacted}
35 onclick={ontoggle}
36 class={`${chipClass} cursor-pointer transition hover:border-border-strong disabled:opacity-50`}
37 >
38 <span>{reaction.kind}</span>
39 <span>{reaction.count}</span>
40 </button>
41{:else}
42 <span {title} class={chipClass}>
43 <span>{reaction.kind}</span>
44 <span>{reaction.count}</span>
45 </span>
46{/if}