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 }
7
8 let { reaction }: Props = $props();
9
10 // keep the tooltip bounded; overflow becomes "and N more", like the go appview
11 const MAX_NAMES = 10;
12 const title = $derived.by(() => {
13 const shown = reaction.users.slice(0, MAX_NAMES);
14 const more = reaction.count - shown.length;
15 const names = shown.join(", ");
16 return more > 0 ? `${names}, and ${more} more` : names;
17 });
18</script>
19
20<span
21 {title}
22 class={`flex min-h-6 items-center justify-center gap-1.5 rounded border px-2 text-sm leading-4 ${
23 reaction.isReacted
24 ? "border-border-strong bg-background-muted text-foreground-default"
25 : "border-border-default text-foreground-subtle"
26 }`}
27>
28 <span>{reaction.kind}</span>
29 <span>{reaction.count}</span>
30</span>