Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566<script module lang="ts"> import { defineMeta } from "@storybook/addon-svelte-csf"; import Section from "$lib/components/ui/Section.svelte";
const { Story } = defineMeta({ title: "UI/Section", component: Section, tags: ["autodocs"] });</script>
{#snippet items()} <div class="rounded-sm border border-border-default p-md">First item</div> <div class="rounded-sm border border-border-default p-md">Second item</div> <div class="rounded-sm border border-border-default p-md">Third item</div>{/snippet}
<Story name="Default" asChild> <Section title="Repositories" empty={false} emptyMessage="No repositories yet."> {@render items()} </Section></Story>
<!-- With `empty`, children are ignored and EmptyState renders with `emptyMessage`. --><Story name="Empty" asChild> <Section title="Repositories" empty emptyMessage="No repositories yet."> {@render items()} </Section></Story>
<Story name="Without title" asChild> <Section empty={false} emptyMessage="Nothing here."> {@render items()} </Section></Story>
<!-- `header` renders between the title and the list; `listClass` overrides the list layout. --><Story name="Header and custom list" asChild> <Section title="Pinned" empty={false} emptyMessage="Nothing pinned." listClass="grid grid-cols-2 gap-md" > {#snippet header()} <p class="px-xs pb-xs typography-paragraph-small text-foreground-subtle"> Up to four pinned repositories. </p> {/snippet} {@render items()} </Section></Story>
<Story name="Footer" asChild> <Section title="Repositories" empty={false} emptyMessage="Nothing here."> {@render items()} {#snippet footer()} <div class="mt-md flex justify-center typography-paragraph-small text-foreground-subtle" > footer </div> {/snippet} </Section></Story>