Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051<script module lang="ts"> import { defineMeta } from "@storybook/addon-svelte-csf"; import Section from "./Section.svelte";
const { Story } = defineMeta({ title: "UI/Section", component: Section, tags: ["autodocs"] });</script>
{#snippet items()} <div class="rounded-sm border border-border-default p-4">First item</div> <div class="rounded-sm border border-border-default p-4">Second item</div> <div class="rounded-sm border border-border-default p-4">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-4" > {#snippet header()} <p class="px-2 pb-2 text-sm text-foreground-subtle">Up to four pinned repositories.</p> {/snippet} {@render items()} </Section></Story>