alice.pds.demo.boltless.dev
This repository has no description
1<script module lang="ts">
2 import { tv, type VariantProps } from "tailwind-variants";
3
4 export const user = tv({
5 slots: {
6 avatar: "",
7 handle: "truncate text-foreground-default"
8 },
9 variants: {
10 size: {
11 sm: {
12 avatar: "size-5",
13 handle: "text-xs"
14 },
15 md: {
16 avatar: "size-6",
17 handle: "text-sm"
18 },
19 lg: {
20 avatar: "size-8",
21 handle: "text-base"
22 }
23 }
24 },
25 defaultVariants: {
26 size: "md"
27 }
28 });
29
30 export type UserVariants = VariantProps<typeof user>;
31</script>
32
33<script lang="ts">
34 import Avatar from "./Avatar.svelte";
35
36 interface Props {
37 handle?: string;
38 src?: string;
39 size?: UserVariants["size"];
40 showImage?: boolean;
41 showText?: boolean;
42 class?: string;
43 }
44
45 let {
46 handle,
47 src,
48 size = "md",
49 showImage = true,
50 showText = true,
51 class: className
52 }: Props = $props();
53
54 const slots = $derived(user({ size }));
55</script>
56
57<span class={`inline-flex items-center gap-2 ${className ?? ""}`}>
58 {#if showImage}
59 <Avatar {src} {handle} size={slots.avatar()} />
60 {/if}
61 {#if showText && handle}
62 <span class={slots.handle()}>{handle}</span>
63 {/if}
64</span>