[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
add charts
+197
-8
+83
-3
src/routes/+page.svelte
+83
-3
src/routes/+page.svelte
···
5
5
import CardBadge from '$lib/cards/CardBadge.svelte';
6
6
import CardBox from '$lib/cards/CardBox.svelte';
7
7
import CardButtons from '$lib/cards/CardButtons.svelte';
8
+
import CardCard from '$lib/cards/CardCard.svelte';
8
9
import CardChatBubble from '$lib/cards/CardChatBubble.svelte';
9
10
import CardCheckbox from '$lib/cards/CardCheckbox.svelte';
11
+
import CardGithubCorner from '$lib/cards/CardGithubCorner.svelte';
12
+
import CardHead from '$lib/cards/CardHead.svelte';
10
13
import CardImage from '$lib/cards/CardImage.svelte';
11
14
import CardInput from '$lib/cards/CardInput.svelte';
12
15
import CardModal from '$lib/cards/CardModal.svelte';
···
17
20
import CardSwitch from '$lib/cards/CardSwitch.svelte';
18
21
import CardTextarea from '$lib/cards/CardTextarea.svelte';
19
22
import CardTooltip from '$lib/cards/CardTooltip.svelte';
23
+
import CardHeatmap from '$lib/cards/graphs/CardHeatmap.svelte';
24
+
import CardLineGraph from '$lib/cards/graphs/CardLineGraph.svelte';
25
+
import CardRingChart from '$lib/cards/graphs/CardRingChart.svelte';
20
26
import { Button, buttonVariants } from '$lib/components/base/button';
21
27
import Navbar from '$lib/components/base/navbar/Navbar.svelte';
22
28
import * as Popover from '$lib/components/base/popover';
···
26
32
import SelectTheme from '$lib/preview/SelectTheme.svelte';
27
33
import { cn } from '$lib/utils';
28
34
29
-
const cards = [
35
+
let cards = [
30
36
{
31
37
component: CardAlerts,
32
38
className: '',
···
128
134
className: '',
129
135
label: 'Tooltips',
130
136
href: '/tooltip'
137
+
},
138
+
{
139
+
component: CardCard,
140
+
className: '',
141
+
label: 'Cards',
142
+
href: '/image-card'
143
+
},
144
+
{
145
+
component: CardGithubCorner,
146
+
className: '',
147
+
label: 'Github Corner',
148
+
href: '/github-corner'
149
+
},
150
+
{
151
+
component: CardHead,
152
+
className: 'px-0 gap-0',
153
+
label: 'Head',
154
+
href: '/head'
131
155
}
132
156
];
133
-
</script>
134
157
158
+
// sort cards by label
159
+
cards.sort((a, b) => a.label.localeCompare(b.label));
160
+
161
+
let graphCards = [
162
+
{
163
+
component: CardHeatmap,
164
+
className: '',
165
+
label: 'Heatmap',
166
+
href: '/heatmap'
167
+
},
168
+
{
169
+
component: CardLineGraph,
170
+
className: '',
171
+
label: 'Line Graph',
172
+
href: '/line-graph'
173
+
},
174
+
{
175
+
component: CardRingChart,
176
+
className: '',
177
+
label: 'Ring Chart',
178
+
href: '/ring-chart'
179
+
}
180
+
];
181
+
182
+
// sort graphCards by label
183
+
graphCards.sort((a, b) => a.label.localeCompare(b.label));
184
+
</script>
135
185
136
186
<Navbar>
137
187
<div>
···
192
242
>
193
243
<div
194
244
class={cn(
195
-
'absolute inset-0 flex h-full w-full flex-col items-center justify-center gap-2 p-6 transition-transform duration-300 group-hover:scale-105',
245
+
'absolute will-change-transform inset-0 flex h-full w-full flex-col items-center justify-center gap-2 p-6 transition-transform duration-300 group-hover:scale-103',
246
+
card.className,
247
+
)}
248
+
aria-hidden="true"
249
+
tabindex="-1"
250
+
>
251
+
<card.component />
252
+
</div>
253
+
</div>
254
+
<a
255
+
href={base + `/components${card.href}`}
256
+
class="focus-visible:outline-2 rounded-xl focus-visible:outline-accent-500 focus-visible:outline-offset-2"
257
+
>
258
+
<span class="mx-2 text-sm font-semibold text-base-900 dark:text-base-50">{card.label}</span>
259
+
<span class="absolute inset-0"></span>
260
+
</a>
261
+
</div>
262
+
{/each}
263
+
</div>
264
+
265
+
266
+
<h2 class="text-xl font-medium mb-4 text-base-800 dark:text-base-200 mt-24">Graph components</h2>
267
+
<div class="grid w-full grid-cols-1 gap-6 md:gap-8 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
268
+
{#each graphCards as card}
269
+
<div class="group relative transition-opacity duration-150 hover:opacity-90 flex flex-col gap-3 md:gap-4 items-start">
270
+
<div
271
+
class="bg-base-100 pointer-events-none w-full dark:bg-base-900/30 border-base-200 dark:border-base-900 relative h-44 rounded-2xl border overflow-hidden"
272
+
>
273
+
<div
274
+
class={cn(
275
+
'absolute will-change-transform inset-0 flex h-full w-full flex-col items-center justify-center gap-2 p-6 transition-transform duration-300 group-hover:scale-103',
196
276
card.className,
197
277
)}
198
278
aria-hidden="true"
+17
src/lib/cards/CardCard.svelte
+17
src/lib/cards/CardCard.svelte
···
1
+
<script>
2
+
import nature from '$lib/assets/images/nature2.jpg?as=run';
3
+
import Image from '$lib/components/base/image/Image.svelte';
4
+
import Text from '$lib/components/base/text/Text.svelte';
5
+
</script>
6
+
7
+
<div class="flex w-fit flex-col items-start gap-1 mx-auto border border-base-300 bg-base-200 dark:border-base-800 dark:bg-base-900 rounded-2xl p-3 max-w-44">
8
+
<Image
9
+
src={nature}
10
+
alt="Nature"
11
+
class="max-h-full max-w-full object-cover"
12
+
containerClasses="border-base-300 dark:border-base-700 overflow-hidden max-w-full max-h-20 rounded-2xl border rounded-2xl overflow-hidden"
13
+
/>
14
+
15
+
<Text class="font-semibold mt-2">Card Title</Text>
16
+
<Text class="text-xs font-normal">Card Subtitle</Text>
17
+
</div>
+5
src/lib/cards/CardGithubCorner.svelte
+5
src/lib/cards/CardGithubCorner.svelte
+23
src/lib/cards/CardHead.svelte
+23
src/lib/cards/CardHead.svelte
···
1
+
<script>
2
+
import Text from '$lib/components/base/text/Text.svelte';
3
+
</script>
4
+
5
+
<div
6
+
class="border-base-300 dark:border-base-800 from-base-300/50 dark:from-base-900/50 rounded-t-xl border bg-gradient-to-b via-transparent pt-2 mx-2"
7
+
>
8
+
<div class="flex items-center gap-2 px-2">
9
+
<div class="size-3 rounded-full border border-red-500 bg-red-500/80"></div>
10
+
<div class="size-3 rounded-full border border-yellow-500 bg-yellow-500/80"></div>
11
+
<div class="size-3 rounded-full border border-green-500 bg-green-500/80"></div>
12
+
<div class="px-2">
13
+
<div
14
+
class="border-base-300 dark:border-base-800 from-base-300/50 dark:from-base-900/50 -mb-0.25 flex w-full items-center gap-2 rounded-t-2xl border bg-gradient-to-b via-transparent px-3 pt-2 pb-1"
15
+
>
16
+
🫠
17
+
<Text class="text-base-900 dark:text-base-50 line-clamp-1 font-semibold">Website Title</Text
18
+
>
19
+
</div>
20
+
</div>
21
+
</div>
22
+
23
+
</div>
+11
src/lib/cards/graphs/CardHeatmap.svelte
+11
src/lib/cards/graphs/CardHeatmap.svelte
···
1
+
<script lang="ts">
2
+
import Heatmap from '$lib/components/charts/heatmap/Heatmap.svelte';
3
+
4
+
const heatmapData = Array.from({ length: 30 }, () =>
5
+
Array.from({ length: 7 }, () => Math.floor(Math.random() * 5))
6
+
) as (0 | 1 | 2 | 3 | 4)[][];
7
+
</script>
8
+
9
+
<div class="w-full overflow-hidden">
10
+
<Heatmap data={heatmapData} />
11
+
</div>
+16
src/lib/cards/graphs/CardLineGraph.svelte
+16
src/lib/cards/graphs/CardLineGraph.svelte
···
1
+
<script>
2
+
import LineGraph from '$lib/components/charts/line-graph/LineGraph.svelte';
3
+
4
+
const data = [
5
+
{ x: new Date('2020-01-01'), value: 10 },
6
+
{ x: new Date('2020-01-20'), value: 50 },
7
+
{ x: new Date('2020-02-02'), value: 20 },
8
+
{ x: new Date('2020-03-03'), value: 30 },
9
+
{ x: new Date('2020-04-04'), value: 20 },
10
+
{ x: new Date('2020-04-20'), value: 80 },
11
+
{ x: new Date('2020-05-05'), value: 50 },
12
+
{ x: new Date('2020-05-20'), value: 10 }
13
+
];
14
+
</script>
15
+
16
+
<LineGraph {data} />
+34
src/lib/cards/graphs/CardRingChart.svelte
+34
src/lib/cards/graphs/CardRingChart.svelte
···
1
+
<script>
2
+
import RingChart from '$lib/components/charts/ring-chart/RingChart.svelte';
3
+
</script>
4
+
5
+
6
+
<RingChart
7
+
height="h-30"
8
+
thickness={10}
9
+
data={[
10
+
{
11
+
name: 'Svelte',
12
+
value: 40
13
+
},
14
+
{
15
+
name: 'TypeScript',
16
+
value: 30
17
+
},
18
+
{
19
+
name: 'HTML',
20
+
value: 20
21
+
},
22
+
{
23
+
name: 'JavaScript',
24
+
value: 10
25
+
}
26
+
]}
27
+
colors={[
28
+
{ key: 0, color: 'var(--accent-800)' },
29
+
{ key: 1, color: 'var(--accent-600)' },
30
+
{ key: 2, color: 'var(--accent-400)' },
31
+
{ key: 3, color: 'var(--accent-200)' }
32
+
]}
33
+
showLegend={false}
34
+
/>
src/routes/components/head/+page.svelte
src/routes/components/head/+page.svelte
+1
-1
src/lib/components/base/textarea/textarea.svelte
+1
-1
src/lib/components/base/textarea/textarea.svelte
···
15
15
'focus:ring-base-800 dark:focus:ring-base-200 bg-base-100/50 dark:bg-base-900/50 text-base-900 dark:text-base-50 ring-base-200 dark:ring-base-800'
16
16
},
17
17
sizeVariant: {
18
-
default: 'px-3 py-1.5 min-h-[80px]',
18
+
default: 'px-3 py-1.5 text-base min-h-[80px]',
19
19
sm: 'px-3 text-xs py-1.5 font-base min-h-[60px]',
20
20
lg: 'px-4 text-lg py-2 font-semibold min-h-[100px]'
21
21
}
+1
-1
src/lib/components/charts/heatmap/Heatmap.svelte
+1
-1
src/lib/components/charts/heatmap/Heatmap.svelte
+6
-3
src/lib/components/charts/line-graph/LineGraph.svelte
+6
-3
src/lib/components/charts/line-graph/LineGraph.svelte
···
11
11
return formatDate(value, PeriodType.Month, { variant: 'short' });
12
12
};
13
13
14
-
let { data } = $props();
14
+
let { data, showYAxis = false }: {
15
+
data: { x: Date; value: number }[];
16
+
showYAxis?: boolean;
17
+
} = $props();
15
18
</script>
16
19
17
20
<div class="h-44 w-full overflow-visible p-4 line-graph-container">
···
31
34
tickLabelProps={{
32
35
rotate: 315,
33
36
textAnchor: 'end',
34
-
class: 'fill-accent-700 dark:fill-accent-600 font-medium text-xs'
37
+
class: 'fill-accent-700 dark:fill-accent-600 font-medium text-xs ' + (showYAxis ? '' : ' hidden')
35
38
}}
36
39
ticks={4}
37
40
classes={{
38
41
tickLabel: 'pl-4'
39
42
}}
40
-
/>
43
+
/>
41
44
42
45
<Axis
43
46
placement="bottom"