Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122<script module lang="ts"> import { tv, type VariantProps } from "tailwind-variants"; import type { AvatarSize } from "$lib/components/ui/Avatar.svelte";
export const user = tv({ slots: { root: "inline-flex min-w-0 items-center", handle: "min-w-0 truncate" }, variants: { size: { header: { root: "gap-xs", handle: "typography-heading-4" }, large: { root: "gap-1.5", handle: "typography-paragraph-large" }, regular: { root: "gap-1.5", handle: "typography-paragraph-regular" }, small: { root: "gap-1.5", handle: "typography-paragraph-small" }, mini: { root: "gap-2xs", handle: "typography-paragraph-mini" } }, link: { true: { root: "text-foreground-default hover:underline" } } }, defaultVariants: { size: "regular", link: false } });
export type UserVariants = VariantProps<typeof user>;
const avatarSize = { header: "large", large: "large", regular: "regular", small: "small", mini: "mini" } satisfies Record<NonNullable<UserVariants["size"]>, AvatarSize>;</script>
<script lang="ts"> import { resolve } from "$app/paths"; import Avatar from "$lib/components/ui/Avatar.svelte"; import VouchAvatar from "$lib/components/profile/VouchAvatar.svelte";
interface Props { handle?: string; did?: string; size?: UserVariants["size"]; showImage?: boolean; showText?: boolean; class?: string; avatarClass?: string; handleClass?: string; link?: boolean; email?: string; vouchBadge?: boolean; }
let { handle, did, size = "regular", showImage = true, showText = true, class: className, avatarClass, handleClass, link = false, email, vouchBadge = false }: Props = $props();
const actor = $derived(handle ?? did); const linked = $derived(link && actor !== undefined); const slots = $derived(user({ size, link: linked }));</script>
{#snippet body()} {#if showImage} {#if vouchBadge && did} <VouchAvatar {did} {handle} size={avatarSize[size]} class={avatarClass} /> {:else} <Avatar {did} {handle} size={avatarSize[size]} class={avatarClass} /> {/if} {/if} {#if showText && handle} <span class={slots.handle({ class: handleClass })}>{handle}</span> {/if}{/snippet}
{#if linked} {#if email} <a href="mailto:{email}" class={slots.root({ class: className })}> {@render body()} </a> {:else} <a href={resolve(`/${actor}` as "/")} class={slots.root({ class: className })}> {@render body()} </a> {/if}{:else} <span class={slots.root({ class: className })}> {@render body()} </span>{/if}