[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
bento initial setup
+77
-60
+1
-1
src/routes/+page.svelte
+1
-1
src/routes/+page.svelte
···
50
50
</script>
51
51
52
52
<ScrollArea type="scroll" class="h-[100dvh] w-screen">
53
-
<div class="flex items-center justify-center p-8">
53
+
<div class="flex min-h-screen items-center justify-center p-8">
54
54
<div class="h-full w-full max-w-6xl text-black dark:text-white">
55
55
<div
56
56
class={[
-59
src/routes/Bento.svelte
-59
src/routes/Bento.svelte
···
1
-
<script>
2
-
import { ThemeToggle } from '$lib/components/theme-toggle';
3
-
4
-
let background = 'bg-base-100 dark:bg-base-900 border border-base-200 dark:border-base-800';
5
-
</script>
6
-
7
-
<div class="flex h-screen w-screen items-center justify-center p-4">
8
-
<div
9
-
class="flex h-full w-full max-w-6xl flex-col items-center justify-center rounded-xl p-4 text-black dark:text-white"
10
-
>
11
-
<div
12
-
class={[
13
-
'mb-6 flex w-full max-w-6xl items-center justify-between rounded-2xl p-6',
14
-
background
15
-
]}
16
-
>
17
-
<div class="font-display text-xl font-bold uppercase">hello there</div>
18
-
19
-
<ThemeToggle />
20
-
</div>
21
-
<div
22
-
class="grid h-full w-full max-w-6xl grid-cols-1 gap-6 md:grid-cols-12 md:grid-rows-5 lg:max-h-[calc(100vh-150px)]"
23
-
>
24
-
<div
25
-
class={[
26
-
'order-1 col-span-1 row-span-2 w-full rounded-2xl p-6 text-5xl font-bold md:col-span-5',
27
-
background
28
-
]}
29
-
></div>
30
-
<div
31
-
class={[
32
-
'order-2 col-span-1 row-span-2 overflow-hidden rounded-2xl p-6 text-5xl font-bold md:col-span-3',
33
-
background
34
-
]}
35
-
></div>
36
-
37
-
<div
38
-
class="order-last col-span-1 row-span-5 flex w-full flex-col gap-6 text-5xl font-bold md:order-3 md:col-span-4"
39
-
>
40
-
<div class={['grow rounded-2xl p-6 text-5xl font-bold', background]}></div>
41
-
42
-
<div class={['rounded-2xl p-6 text-5xl font-bold', background]}></div>
43
-
</div>
44
-
45
-
<div
46
-
class={[
47
-
'order-5 col-span-1 row-span-3 rounded-2xl p-6 text-5xl font-bold md:col-span-4',
48
-
background
49
-
]}
50
-
></div>
51
-
<div
52
-
class={[
53
-
'order-6 col-span-1 row-span-3 rounded-2xl p-6 text-5xl font-bold md:col-span-4',
54
-
background
55
-
]}
56
-
></div>
57
-
</div>
58
-
</div>
59
-
</div>
src/routes/sections/+page.svelte
src/routes/sections/+page.svelte
+71
src/lib/sections/bento/Bento.svelte
+71
src/lib/sections/bento/Bento.svelte
···
1
+
<script lang="ts">
2
+
import ScrollArea from '$lib/components/scroll-area/ScrollArea.svelte';
3
+
import { cn } from '$lib/utils';
4
+
5
+
let background = 'bg-base-100 dark:bg-base-900 border border-base-200 dark:border-base-800';
6
+
let accentBackground =
7
+
'bg-accent-500/5 dark:bg-accent-500/5 border border-accent-500/20 dark:border-accent-500/20';
8
+
</script>
9
+
10
+
{#snippet Card({ title, class: className }: { title: string; class?: string })}
11
+
<div
12
+
class={cn(
13
+
'flex h-full min-h-24 w-full items-center justify-center text-xl font-bold',
14
+
className
15
+
)}
16
+
>
17
+
{title}
18
+
</div>
19
+
{/snippet}
20
+
21
+
<ScrollArea type="scroll" class="h-[100dvh] w-screen">
22
+
<div class="flex min-h-screen items-center justify-center p-8">
23
+
<div class="h-full w-full max-w-5xl text-base-900 dark:text-base-50">
24
+
<div
25
+
class={[
26
+
'mb-6 flex w-full items-start justify-between rounded-2xl p-6 md:items-center',
27
+
background
28
+
]}
29
+
>
30
+
{@render Card({ title: 'title', class: 'min-h-4' })}
31
+
</div>
32
+
<div class="grid h-full w-full grid-cols-1 gap-6 md:grid-cols-12 md:grid-rows-5">
33
+
<div
34
+
class={[
35
+
'order-1 col-span-1 row-span-2 flex w-full flex-col items-start justify-between rounded-2xl p-6 md:col-span-5',
36
+
accentBackground
37
+
]}
38
+
>
39
+
{@render Card({ title: '1' })}
40
+
</div>
41
+
<div
42
+
class={[
43
+
'order-6 col-span-1 row-span-2 min-h-60 overflow-hidden rounded-2xl p-6 md:order-2 md:col-span-3',
44
+
background
45
+
]}
46
+
>
47
+
{@render Card({ title: '2' })}
48
+
</div>
49
+
50
+
<div
51
+
class="order-2 col-span-1 row-span-5 flex w-full flex-col gap-6 md:order-3 md:col-span-4"
52
+
>
53
+
<div class={['grow rounded-2xl p-6', accentBackground]}>
54
+
{@render Card({ title: '3' })}
55
+
</div>
56
+
57
+
<div class={['flex flex-col items-start justify-end gap-4 rounded-2xl p-6', background]}>
58
+
{@render Card({ title: '4', class: 'min-h-0' })}
59
+
</div>
60
+
</div>
61
+
62
+
<div class={['order-5 col-span-1 row-span-3 rounded-2xl p-6 md:col-span-4', background]}>
63
+
{@render Card({ title: '5' })}
64
+
</div>
65
+
<div class={['order-6 col-span-1 row-span-3 rounded-2xl p-6 md:col-span-4', background]}>
66
+
{@render Card({ title: '6' })}
67
+
</div>
68
+
</div>
69
+
</div>
70
+
</div>
71
+
</ScrollArea>