[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
update chat bubbles preview
+12
-3
+9
src/lib/preview/ChatBubblePreview.svelte
+9
src/lib/preview/ChatBubblePreview.svelte
···
2
2
import Box from '$lib/components/box/Box.svelte';
3
3
import ChatBubble from '$lib/components/chat-bubble/ChatBubble.svelte';
4
4
import Heading from '$lib/components/heading/Heading.svelte';
5
+
import Image from '$lib/components/image/Image.svelte';
6
+
7
+
import cute from '$lib/assets/cute.jpg?as=run';
5
8
</script>
6
9
7
10
<Heading class="mb-4">Chat Bubble</Heading>
···
22
25
<p>
23
26
This is another really long message that should wrap around the chat bubble and not overflow
24
27
</p>
28
+
</ChatBubble>
29
+
30
+
<ChatBubble side="right" variant="secondary">
31
+
<p>This is me sending you an image</p>
32
+
33
+
<Image src={cute} alt="cute cat" class="-mx-1.5 rounded-xl" />
25
34
</ChatBubble>
26
35
</Box>
+2
-2
src/lib/components/chat-bubble/ChatBubble.svelte
+2
-2
src/lib/components/chat-bubble/ChatBubble.svelte
···
3
3
import { cn } from '$lib/utils';
4
4
5
5
export const badgeVariants = tv({
6
-
base: 'inline-flex items-center justify-center whitespace-nowrap rounded-2xl text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 duration-300 active:duration-100 [&_svg]:pointer-events-none [&_svg]:shrink-0',
6
+
base: 'inline-flex items-center flex-col justify-start items-start whitespace-nowrap rounded-2xl text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 duration-300 active:duration-100 [&_svg]:pointer-events-none [&_svg]:shrink-0',
7
7
variants: {
8
8
variant: {
9
9
primary:
···
40
40
},
41
41
size: {
42
42
sm: 'px-2 text-xs py-0.5 [&_svg]:size-3 gap-1.5',
43
-
md: 'px-3 py-1 [&_svg]:size-4 gap-2',
43
+
md: 'px-3 py-1.5 [&_svg]:size-4 gap-2',
44
44
lg: 'px-4 text-lg py-1.5 [&_svg]:size-5 gap-2.5'
45
45
}
46
46
},
+1
-1
src/lib/components/image/Image.svelte
+1
-1
src/lib/components/image/Image.svelte
···
46
46
/>
47
47
{#if blur}
48
48
<div
49
-
class="image-blur pointer-events-none absolute inset-0 backdrop-blur-md data-[loaded=true]:hidden"
49
+
class="image-blur rounded-2xl pointer-events-none absolute inset-0 backdrop-blur-md data-[loaded=true]:hidden"
50
50
data-loaded={loaded}
51
51
></div>
52
52
{/if}