alice.pds.demo.boltless.dev
This repository has no description
web: update User component
author
eti
committer
dawn
date
(Jul 30, 2026, 7:45 PM +0300)
commit
a2efdca8
a2efdca8d68ce6245be7c197fc3385ef812e149c
parent
d35a24d7
d35a24d7555e44896965a8d2f5cac6733feaa610
change-id
orwunmzq
orwunmzqqrqrlmkmxntpwwzsnwxmrkpx
+46
-19
+7
-5
web/src/lib/components/ui/User.stories.svelte
+7
-5
web/src/lib/components/ui/User.stories.svelte
···
11
11
src: { control: "text" },
12
12
size: {
13
13
control: { type: "inline-radio" },
14
-
options: ["sm", "md", "lg"]
14
+
options: ["header", "large", "regular", "small", "mini"]
15
15
},
16
16
showImage: { control: "boolean" },
17
17
showText: { control: "boolean" }
18
18
},
19
19
args: {
20
20
handle: "user.tld",
21
-
size: "md",
21
+
size: "regular",
22
22
showImage: true,
23
23
showText: true
24
24
}
···
32
32
33
33
<Story name="Sizes">
34
34
<div class="flex flex-col items-start gap-3">
35
-
<User size="lg" />
36
-
<User size="md" />
37
-
<User size="sm" />
35
+
<User size="header" />
36
+
<User size="large" />
37
+
<User size="regular" />
38
+
<User size="small" />
39
+
<User size="mini" />
38
40
</div>
39
41
</Story>
+39
-14
web/src/lib/components/ui/User.svelte
+39
-14
web/src/lib/components/ui/User.svelte
···
1
1
<script module lang="ts">
2
2
import { tv, type VariantProps } from "tailwind-variants";
3
+
import type { TypographyVariants } from "./Typography.svelte";
3
4
4
5
export const user = tv({
5
6
slots: {
7
+
root: "inline-flex items-center",
6
8
avatar: "",
7
-
handle: "truncate text-foreground-default"
9
+
handle: "truncate"
8
10
},
9
11
variants: {
10
12
size: {
11
-
sm: {
12
-
avatar: "size-5",
13
-
handle: "text-xs"
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",
23
+
avatar: "size-[21px]"
14
24
},
15
-
md: {
16
-
avatar: "size-6",
17
-
handle: "text-sm"
25
+
small: {
26
+
root: "gap-1",
27
+
avatar: "size-[17px]"
18
28
},
19
-
lg: {
20
-
avatar: "size-8",
21
-
handle: "text-base"
29
+
mini: {
30
+
root: "gap-1",
31
+
avatar: "size-[13px]"
22
32
}
23
33
}
24
34
},
25
35
defaultVariants: {
26
-
size: "md"
36
+
size: "regular"
27
37
}
28
38
});
29
39
30
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"]>;
31
49
</script>
32
50
33
51
<script lang="ts">
34
52
import Avatar from "./Avatar.svelte";
53
+
import { typography } from "./Typography.svelte";
35
54
36
55
interface Props {
37
56
handle?: string;
···
45
64
let {
46
65
handle,
47
66
src,
48
-
size = "md",
67
+
size = "regular",
49
68
showImage = true,
50
69
showText = true,
51
70
class: className
52
71
}: Props = $props();
53
72
54
73
const slots = $derived(user({ size }));
74
+
const handleClass = $derived(
75
+
typography({
76
+
variant: handleVariant[size ?? "regular"],
77
+
class: slots.handle()
78
+
})
79
+
);
55
80
</script>
56
81
57
-
<span class={`inline-flex items-center gap-2 ${className ?? ""}`}>
82
+
<span class={slots.root({ class: className })}>
58
83
{#if showImage}
59
84
<Avatar {src} {handle} size={slots.avatar()} />
60
85
{/if}
61
86
{#if showText && handle}
62
-
<span class={slots.handle()}>{handle}</span>
87
+
<span class={handleClass}>{handle}</span>
63
88
{/if}
64
89
</span>