Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091<script module lang="ts"> import { tv, type VariantProps } from "tailwind-variants"; import type { TypographyVariants } from "./Typography.svelte";
export const user = tv({ slots: { root: "inline-flex items-center", avatar: "", handle: "truncate" }, variants: { size: { header: { root: "gap-2", avatar: "size-[26px]" }, large: { root: "gap-1.5", avatar: "size-[26px]" }, regular: { root: "gap-1", avatar: "size-[21px]" }, small: { root: "gap-1", avatar: "size-[17px]" }, mini: { root: "gap-1", avatar: "size-[13px]" } } }, defaultVariants: { size: "regular" } });
export type UserVariants = VariantProps<typeof user>;
const handleVariant = { header: "h4", large: "large", regular: "regular", small: "small", mini: "mini" } as const satisfies Record<NonNullable<UserVariants["size"]>, TypographyVariants["variant"]>;</script>
<script lang="ts"> import Avatar from "./Avatar.svelte"; import { typography } from "./Typography.svelte";
interface Props { handle?: string; did?: string; size?: UserVariants["size"]; showImage?: boolean; showText?: boolean; class?: string; }
let { handle, did, size = "regular", showImage = true, showText = true, class: className }: Props = $props();
const slots = $derived(user({ size })); const handleClass = $derived( typography({ variant: handleVariant[size ?? "regular"], class: slots.handle() }) );</script>
<span class={slots.root({ class: className })}> {#if showImage} <!-- every variant here is size-8 or under, so the small image always fits --> <Avatar {did} {handle} size={slots.avatar()} tiny /> {/if} {#if showText && handle} <span class={handleClass}>{handle}</span> {/if}</span>