alice.pds.demo.boltless.dev
This repository has no description
1<script module lang="ts">
2 import { defineMeta } from "@storybook/addon-svelte-csf";
3 import Section from "./Section.svelte";
4
5 const { Story } = defineMeta({
6 title: "UI/Section",
7 component: Section,
8 tags: ["autodocs"]
9 });
10</script>
11
12{#snippet items()}
13 <div class="rounded-sm border border-border-default p-4">First item</div>
14 <div class="rounded-sm border border-border-default p-4">Second item</div>
15 <div class="rounded-sm border border-border-default p-4">Third item</div>
16{/snippet}
17
18<Story name="Default" asChild>
19 <Section title="Repositories" empty={false} emptyMessage="No repositories yet.">
20 {@render items()}
21 </Section>
22</Story>
23
24<!-- With `empty`, children are ignored and EmptyState renders with `emptyMessage`. -->
25<Story name="Empty" asChild>
26 <Section title="Repositories" empty emptyMessage="No repositories yet.">
27 {@render items()}
28 </Section>
29</Story>
30
31<Story name="Without title" asChild>
32 <Section empty={false} emptyMessage="Nothing here.">
33 {@render items()}
34 </Section>
35</Story>
36
37<!-- `header` renders between the title and the list; `listClass` overrides the list layout. -->
38<Story name="Header and custom list" asChild>
39 <Section
40 title="Pinned"
41 empty={false}
42 emptyMessage="Nothing pinned."
43 listClass="grid grid-cols-2 gap-4"
44 >
45 {#snippet header()}
46 <p class="px-2 pb-2 text-sm text-foreground-subtle">Up to four pinned repositories.</p>
47 {/snippet}
48 {@render items()}
49 </Section>
50</Story>
51
52<Story name="Footer" asChild>
53 <Section title="Repositories" empty={false} emptyMessage="Nothing here.">
54 {@render items()}
55 {#snippet footer()}
56 <div class="mt-4 flex justify-center text-sm text-foreground-subtle">footer</div>
57 {/snippet}
58 </Section>
59</Story>