Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364<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-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 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-4 flex justify-center typography-paragraph-small text-foreground-subtle"> footer </div> {/snippet} </Section></Story>