import { Show } from "solid-js" import * as mod from "./tabs-v2" import type { TabsV2Props } from "./tabs-v2" const docs = ` Tabbed navigation for switching between related panels. Compose \`TabsV2.List\` + \`TabsV2.Trigger\` + \`TabsV2.Content\`. > Haven't used tokens since this is an independent repo, but that's an easy change. ` export default { title: "UI V2/Tabs", id: "components-tabs-v2", component: mod.TabsV2, tags: ["autodocs"], parameters: { frameHeight: "240px", frameBackground: "#fff", docs: { description: { component: docs, }, }, }, argTypes: { variant: { control: "select", options: ["normal", "pill", "settings"], }, orientation: { control: "select", options: ["horizontal", "vertical"], }, }, } export const Settings = { args: { variant: "settings", orientation: "vertical", defaultValue: "general", }, render: (props: TabsV2Props) => ( General Appearance

General settings

Appearance settings

), } export const Normal = { args: { variant: "normal", orientation: "horizontal", defaultValue: "first", }, render: (props: TabsV2Props) => ( First Second

Normal content

Some more alt content

), } export const Pill = { args: { variant: "pill", orientation: "horizontal", defaultValue: "first", }, render: (props: TabsV2Props) => ( First Second Closable console.log("Close tab-3")} />

Normal content

Some more alt content

Closable content

), } export const Closable = { args: { variant: "normal", orientation: "horizontal", defaultValue: "tab-1", }, render: (props: TabsV2Props) => ( Tab 1 console.log("Close tab-1")} /> Tab 2

Closable content

Standard content

), }