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 root: "inline-flex items-center",
7 avatar: "",
8 handle: "truncate"
9 },
10 variants: {
11 size: {
12 header: {
13 root: "gap-2",
14 avatar: "size-6.5",
15 handle: "typography-heading-4"
16 },
17 large: {
18 root: "gap-1.5",
19 avatar: "size-6.5",
20 handle: "typography-paragraph-large"
21 },
22 regular: {
23 root: "gap-1",
24 avatar: "size-5.25",
25 handle: "typography-paragraph-regular"
26 },
27 small: {
28 root: "gap-1",
29 avatar: "size-4.25",
30 handle: "typography-paragraph-small"
31 },
32 mini: {
33 root: "gap-1",
34 avatar: "size-3.25",
35 handle: "typography-paragraph-mini"
36 }
37 }
38 },
39 defaultVariants: {
40 size: "regular"
41 }
42 });
43
44 export type UserVariants = VariantProps<typeof user>;
45</script>
46
47<script lang="ts">
48 import Avatar from "./Avatar.svelte";
49
50 interface Props {
51 handle?: string;
52 did?: string;
53 size?: UserVariants["size"];
54 showImage?: boolean;
55 showText?: boolean;
56 class?: string;
57 avatarClass?: string;
58 handleClass?: string;
59 }
60
61 let {
62 handle,
63 did,
64 size = "regular",
65 showImage = true,
66 showText = true,
67 class: className,
68 avatarClass,
69 handleClass
70 }: Props = $props();
71
72 const slots = $derived(user({ size }));
73</script>
74
75<span class={slots.root({ class: className })}>
76 {#if showImage}
77 <!-- every variant here is size-8 or under, so the small image always fits -->
78 <Avatar {did} {handle} size={slots.avatar({ class: avatarClass })} tiny />
79 {/if}
80 {#if showText && handle}
81 <span class={slots.handle({ class: handleClass })}>{handle}</span>
82 {/if}
83</span>