[READ-ONLY] Mirror of https://github.com/flo-bit/ui-kit. 🦊 fox ui, svelte 5 and tailwind 4
flo-bit.dev/ui-kit/
svelte
tailwindcss
ui-components
improve avatar
+50
-49
+7
-20
src/docs/cards/base/CardAvatar.svelte
+7
-20
src/docs/cards/base/CardAvatar.svelte
···
1
1
<script>
2
-
import { AvatarGroup } from '$lib/components/base/avatar';
2
+
import { Avatar, AvatarGroup } from '$lib/components/base/avatar';
3
3
</script>
4
4
5
-
<AvatarGroup
6
-
avatarClass="size-16"
7
-
users={[
8
-
{
9
-
src: 'https://github.com/flo-bit.png',
10
-
alt: 'flo-bit',
11
-
fallback: 'FB'
12
-
},
13
-
{
14
-
alt: 'rich-harris',
15
-
fallback: 'RH'
16
-
},
17
-
{
18
-
src: 'https://github.com/huntabyte.png',
19
-
alt: 'huntabyte',
20
-
fallback: 'HB'
21
-
}
22
-
]}
23
-
/>
5
+
6
+
<div class="flex items-center gap-2">
7
+
<Avatar fallback="AB" class="size-16 text-xl font-semibold" />
8
+
<Avatar class="size-16" />
9
+
<Avatar src="https://github.com/flo-bit.png" alt="flo-bit" fallback="FB" class="size-16" />
10
+
</div>
+3
-3
src/docs/site-components/Cards.svelte
+3
-3
src/docs/site-components/Cards.svelte
···
49
49
{
50
50
component: CardBox,
51
51
className: '',
52
-
label: 'Boxes',
52
+
label: 'Box',
53
53
href: 'box'
54
54
},
55
55
{
···
133
133
{
134
134
component: CardCard,
135
135
className: '',
136
-
label: 'Cards',
136
+
label: 'Card',
137
137
href: 'cards'
138
138
},
139
139
{
···
151
151
{
152
152
component: CardAccordion,
153
153
className: '',
154
-
label: 'Accordions',
154
+
label: 'Accordion',
155
155
href: 'accordion'
156
156
}
157
157
];
+26
-16
src/lib/components/base/avatar/Avatar.svelte
+26
-16
src/lib/components/base/avatar/Avatar.svelte
···
28
28
} = $props();
29
29
</script>
30
30
31
-
<AvatarPrimitive.Root
31
+
<div
32
32
class={cn(
33
-
'border-base-200 bg-base-100 text-base-900 dark:border-base-800 dark:bg-base-900 dark:text-base-50 relative flex size-10 shrink-0 overflow-hidden rounded-full border',
33
+
'border-base-300 bg-base-200 text-base-900 dark:border-base-800 dark:bg-base-900 dark:text-base-50 relative isolate flex size-10 shrink-0 overflow-hidden rounded-full border',
34
34
className
35
35
)}
36
36
{...restProps}
37
-
bind:ref
37
+
bind:this={ref}
38
38
>
39
+
{#if fallback}
40
+
<span class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 font-medium">{fallback}</span>
41
+
{:else}
42
+
<svg
43
+
xmlns="http://www.w3.org/2000/svg"
44
+
viewBox="0 0 24 24"
45
+
fill="currentColor"
46
+
class="text-base-400 dark:text-base-600 absolute top-1/2 left-1/2 mt-1 size-full -translate-x-1/2 -translate-y-1/2"
47
+
>
48
+
<path
49
+
fill-rule="evenodd"
50
+
d="M7.5 6a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM3.751 20.105a8.25 8.25 0 0 1 16.498 0 .75.75 0 0 1-.437.695A18.683 18.683 0 0 1 12 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 0 1-.437-.695Z"
51
+
clip-rule="evenodd"
52
+
/>
53
+
</svg>
54
+
{/if}
39
55
{#if src}
40
-
<AvatarPrimitive.Image
41
-
class={cn('aspect-square size-full', imageClass)}
56
+
<img
57
+
class={cn('z-10 aspect-square size-full', imageClass)}
42
58
{src}
43
59
{alt}
44
-
bind:ref={imageRef}
60
+
bind:this={imageRef}
61
+
onerror={() => {
62
+
imageRef?.classList.add('hidden');
63
+
}}
45
64
/>
46
65
{/if}
47
-
48
-
{#if fallback}
49
-
<AvatarPrimitive.Fallback
50
-
bind:ref={fallbackRef}
51
-
class={cn('flex size-full items-center justify-center', fallbackClass)}
52
-
>
53
-
{fallback}
54
-
</AvatarPrimitive.Fallback>
55
-
{/if}
56
-
</AvatarPrimitive.Root>
66
+
</div>
+5
-3
src/routes/components/base/avatar/Avatar.md
+5
-3
src/routes/components/base/avatar/Avatar.md
···
12
12
13
13
<div class="flex items-center gap-2">
14
14
<Avatar fallback="AB" />
15
-
<Avatar src="https://github.com/flo-bit.png" alt="flo-bit" fallback="FB" class="not-prose" />
15
+
<Avatar />
16
+
<Avatar src="https://github.com/flo-bit.png" alt="flo-bit" fallback="FB" class="not-prose" />
16
17
</div>
17
18
18
19
Avatars Group
···
27
28
{
28
29
src: 'https://github.com/rich-harris.png',
29
30
alt: 'rich-harris',
30
-
fallback: 'RH'
31
31
},
32
32
{
33
33
src: 'https://github.com/huntabyte.png',
34
34
alt: 'huntabyte',
35
-
fallback: 'HB'
35
+
},
36
+
{
37
+
fallback: '+5'
36
38
}
37
39
]}
38
40
class="not-prose"