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 Tabs from "./Tabs.svelte";
4 import BookMarked from "$icon/book-marked";
5 import Star from "$icon/star";
6 import SquareChartGantt from "$icon/square-chart-gantt";
7
8 const tabs = [
9 { id: "overview", label: "Overview", icon: SquareChartGantt, href: "#" },
10 { id: "repos", label: "Repositories", icon: BookMarked, count: 12, href: "#" },
11 { id: "starred", label: "Starred", icon: Star, count: 3, href: "#" }
12 ];
13
14 const plainTabs = [
15 { id: "open", label: "Open", count: 4, href: "#" },
16 { id: "closed", label: "Closed", count: 28, href: "#" }
17 ];
18
19 const { Story } = defineMeta({
20 title: "UI/Tabs",
21 component: Tabs,
22 tags: ["autodocs"],
23 args: {
24 tabs,
25 active: "overview"
26 }
27 });
28</script>
29
30<Story name="Default" />
31<Story name="SecondActive" args={{ active: "repos" }} />
32<Story name="WithoutIcons" args={{ tabs: plainTabs, active: "open" }} />
33<!-- the vertical variant is the settings sidebar shape: it stretches to its container
34 rather than hugging its items, so the stories give it a tall narrow box -->
35<Story name="Vertical" args={{ vertical: true }}>
36 {#snippet template(args)}
37 <div class="flex h-80 w-44 items-stretch">
38 <Tabs {...args} />
39 </div>
40 {/snippet}
41</Story>
42
43<Story name="VerticalSecondActive" args={{ vertical: true, active: "repos" }}>
44 {#snippet template(args)}
45 <div class="flex h-80 w-44 items-stretch">
46 <Tabs {...args} />
47 </div>
48 {/snippet}
49</Story>