Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758<script lang="ts"> import Avatar, { avatarSizeClass, type AvatarSize } from "$lib/components/ui/Avatar.svelte"; import ShieldDirectVouch from "$lib/components/icons/ShieldDirectVouch.svelte"; import ShieldDirectDenounce from "$lib/components/icons/ShieldDirectDenounce.svelte"; import ShieldMixed from "$lib/components/icons/ShieldMixed.svelte"; import ShieldIndirectVouch from "$lib/components/icons/ShieldIndirectVouch.svelte"; import ShieldIndirectDenounce from "$lib/components/icons/ShieldIndirectDenounce.svelte"; import { createVouchBadge } from "$lib/components/profile/vouchBadge.svelte"; import type { NetworkVouchItem } from "$lib/api/graph"; import { twMerge } from "tailwind-merge";
interface Props { did: string; src?: string; handle?: string; size?: AvatarSize; class?: string; preview?: readonly NetworkVouchItem[]; }
let { did, src, handle, size = "regular", class: className = "", preview }: Props = $props();
const sizeClass = $derived(avatarSizeClass[size]); const badge = createVouchBadge( () => did, () => preview ); const shown = $derived.by(() => { const states = { "direct-vouch": [ShieldDirectVouch, "Directly vouched"], "direct-denounce": [ShieldDirectDenounce, "Directly denounced"], mixed: [ShieldMixed, "Mixed network vouches"], "indirect-vouch": [ShieldIndirectVouch, "Vouched by your network"], "indirect-denounce": [ShieldIndirectDenounce, "Denounced by your network"] } as const; return badge.state ? states[badge.state] : null; });</script>
<span class={twMerge("relative inline-flex shrink-0", sizeClass, className)}> <Avatar {did} {src} {handle} size="full" /> {#if badge.loading} <span class="pointer-events-none absolute -right-0.5 -bottom-0.5 size-1/2 animate-pulse rounded-full bg-background-strong" aria-hidden="true" ></span> {:else if shown} {@const Icon = shown[0]} <span class="pointer-events-none absolute -right-0.5 -bottom-0.5 size-1/2 text-white dark:text-gray-900" role="img" aria-label={shown[1]} > <Icon class="size-full" aria-hidden="true" /> </span> {/if}</span>