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" }} />