Monorepo for Tangled
Something went wrong. Try again.
Svelte
123456789101112131415161718192021222324252627282930313233343536<script lang="ts"> import type { ReactionGroup } from "$lib/components/reaction/reactions"; import { formatCount } from "$lib/format"; import Button from "$lib/components/ui/Button.svelte";
interface Props { reaction: ReactionGroup; ontoggle?: () => void; // null for loggedout users pending?: boolean; }
let { reaction, ontoggle, pending = false }: Props = $props();
const MAX_NAMES = 10; const title = $derived.by(() => { const shown = reaction.users.slice(0, MAX_NAMES); const more = reaction.count - shown.length; const names = shown.join(", "); return more > 0 ? `${names}, and ${more} more` : names; });</script>
<Button size="small" {title} disabled={pending} aria-pressed={reaction.isReacted} onclick={ontoggle} class={reaction.isReacted ? "border-background-info-emphasis/10 bg-background-info-subtle hover:bg-background-info-subtle-hover dark:bg-background-subtle dark:hover:bg-background-inset" : undefined}> <span class="typography-paragraph-large leading-none">{reaction.kind}</span> <span class="typography-paragraph-small leading-none">{formatCount(reaction.count)}</span></Button>