Something went wrong. Try again.
Monorepo for Tangled tangled.org
Something went wrong. Try again.
Svelte
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162<script lang="ts"> import UserRoundCheck from "$icon/user-round-check"; import type { SignOff } from "$lib/api/repo"; import { resolveEmailToDid } from "$lib/api/emailDid"; import Avatar from "$lib/components/ui/Avatar.svelte"; import Hovercard from "$lib/components/ui/Hovercard.svelte";
interface Props { signOffs: SignOff[]; class?: string; size?: "small" | "regular" | "large"; }
let { signOffs, class: className, size = "regular" }: Props = $props(); let opened = $state(false); const emailDids = $derived( opened ? resolveEmailToDid(fetch, [ ...new Set(signOffs.flatMap((s) => (s.did ? [] : [s.email]))) ]) : undefined );
const sizeClass = $derived( { small: "size-3.5 -mt-px", regular: "size-4", large: "size-4.5" }[size] );</script>
<Hovercard class={className} cardClass="px-2.5 py-2 select-text" openDelay={50} closeDelay={300} onOpen={() => (opened = true)}> <UserRoundCheck class="{sizeClass} shrink-0 cursor-pointer text-foreground-muted transition-colors duration-150 hover:text-foreground-default" role="img" aria-label={signOffs.length > 1 ? "Signed off by several people" : "Signed off"} /> {#snippet content()} {#await emailDids} {@render signers()} {:then dids} {@render signers(dids)} {/await} {/snippet}</Hovercard>
{#snippet signers(dids?: Map<string, string>)} <div class="flex flex-col gap-2"> {#each signOffs as signOff (signOff.line)} <div class="flex items-center gap-2"> <Avatar did={signOff.did ?? dids?.get(signOff.email)} handle={signOff.name} /> <span class="typography-monospace-regular whitespace-nowrap"> {signOff.line} </span> </div> {/each} </div>{/snippet}