Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110<script module lang="ts"> import { tv, type VariantProps } from "tailwind-variants"; import type { AvatarSize } from "./Avatar.svelte";
export const user = tv({ slots: { root: "inline-flex items-center", handle: "truncate" }, variants: { size: { header: { root: "gap-2", 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-1", handle: "typography-paragraph-mini" } }, link: { true: { root: "text-foreground-default hover:underline" } } }, defaultVariants: { size: "regular", link: false } });
export type UserVariants = VariantProps<typeof user>;
// the avatar names its own size rather than taking a class through a slot, so // that it can pick the image width it needs. header and large share a rung // because in Figma they differ only in the text style beside the circle. 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 "./Avatar.svelte";
interface Props { handle?: string; did?: string; size?: UserVariants["size"]; showImage?: boolean; showText?: boolean; class?: string; avatarClass?: string; handleClass?: string; link?: boolean; }
let { handle, did, size = "regular", showImage = true, showText = true, class: className, avatarClass, handleClass, link = 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} <Avatar {did} {handle} size={avatarSize[size]} class={avatarClass} /> {/if} {#if showText && handle} <span class={slots.handle({ class: handleClass })}>{handle}</span> {/if}{/snippet}
{#if linked} <a href={resolve(`/${actor}` as "/")} class={slots.root({ class: className })}> {@render body()} </a>{:else} <span class={slots.root({ class: className })}> {@render body()} </span>{/if}