alice.pds.demo.boltless.dev
This repository has no description
1<script module lang="ts">
2 import { tv, type VariantProps } from "tailwind-variants";
3 import type { TypographyVariants } from "./Typography.svelte";
4
5 export const user = tv({
6 slots: {
7 root: "inline-flex items-center",
8 avatar: "",
9 handle: "truncate"
10 },
11 variants: {
12 size: {
13 header: {
14 root: "gap-2",
15 avatar: "size-[26px]"
16 },
17 large: {
18 root: "gap-1.5",
19 avatar: "size-[26px]"
20 },
21 regular: {
22 root: "gap-1.5",
23 avatar: "size-[21px]"
24 },
25 small: {
26 root: "gap-1",
27 avatar: "size-[17px]"
28 },
29 mini: {
30 root: "gap-1",
31 avatar: "size-[13px]"
32 }
33 }
34 },
35 defaultVariants: {
36 size: "regular"
37 }
38 });
39
40 export type UserVariants = VariantProps<typeof user>;
41
42 const handleVariant = {
43 header: "h4",
44 large: "large",
45 regular: "regular",
46 small: "small",
47 mini: "mini"
48 } as const satisfies Record<NonNullable<UserVariants["size"]>, TypographyVariants["variant"]>;
49</script>
50
51<script lang="ts">
52 import Avatar from "./Avatar.svelte";
53 import { typography } from "./Typography.svelte";
54
55 interface Props {
56 handle?: string;
57 did?: string;
58 size?: UserVariants["size"];
59 showImage?: boolean;
60 showText?: boolean;
61 class?: string;
62 }
63
64 let {
65 handle,
66 did,
67 size = "regular",
68 showImage = true,
69 showText = true,
70 class: className
71 }: Props = $props();
72
73 const slots = $derived(user({ size }));
74 const handleClass = $derived(
75 typography({
76 variant: handleVariant[size ?? "regular"],
77 class: slots.handle()
78 })
79 );
80</script>
81
82<span class={slots.root({ class: className })}>
83 {#if showImage}
84 <!-- every variant here is size-8 or under, so the small image always fits -->
85 <Avatar {did} {handle} size={slots.avatar()} tiny />
86 {/if}
87 {#if showText && handle}
88 <span class={handleClass}>{handle}</span>
89 {/if}
90</span>