Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465<script module lang="ts"> import { tv, type VariantProps } from "tailwind-variants";
export const user = tv({ slots: { avatar: "", handle: "truncate text-foreground-default" }, variants: { size: { sm: { avatar: "size-5", handle: "text-xs" }, md: { avatar: "size-6", handle: "text-sm" }, lg: { avatar: "size-8", handle: "text-base" } } }, defaultVariants: { size: "md" } });
export type UserVariants = VariantProps<typeof user>;</script>
<script lang="ts"> import Avatar from "./Avatar.svelte";
interface Props { handle?: string; src?: string; size?: UserVariants["size"]; showImage?: boolean; showText?: boolean; class?: string; }
let { handle, src, size = "md", showImage = true, showText = true, class: className }: Props = $props();
const slots = $derived(user({ size }));</script>
<span class={`inline-flex items-center gap-2 ${className ?? ""}`}> {#if showImage} <Avatar {src} {handle} size={slots.avatar()} /> {/if} {#if showText && handle} <span class={slots.handle()}>{handle}</span> {/if}</span>