64 lines
1.6 KiB
TypeScript
64 lines
1.6 KiB
TypeScript
import { Button } from "../components/Button";
|
|
import {
|
|
TabContent,
|
|
TabList,
|
|
TabProvider,
|
|
TabTrigger,
|
|
} from "../components/Tabs";
|
|
|
|
export default {
|
|
title: "React/Tabs",
|
|
decorators: [
|
|
(Story: any) => <TabProvider defaultName="tab1">{Story()}</TabProvider>,
|
|
],
|
|
parameters: {
|
|
layout: "centered",
|
|
},
|
|
};
|
|
|
|
export const Default = () => {
|
|
return (
|
|
<>
|
|
<div className="flex flex-col gap-4 w-[500px]">
|
|
<TabList>
|
|
<TabTrigger name="tab1">Tab 1</TabTrigger>
|
|
<TabTrigger name="tab2">Tab 2</TabTrigger>
|
|
</TabList>
|
|
<TabContent name="tab1">
|
|
<div className="rounded-md bg-neutral-700 p-4">Tab 1 Content</div>
|
|
</TabContent>
|
|
<TabContent name="tab2">
|
|
<div className="rounded-md bg-neutral-700 p-4">Tab 2 Content</div>
|
|
</TabContent>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export const AsChild = () => {
|
|
return (
|
|
<>
|
|
<div className="flex flex-col gap-4 w-[500px]">
|
|
<TabList>
|
|
<TabTrigger name="tab1" asChild>
|
|
<Button preset="ghost" className="justify-center">
|
|
Tab 1
|
|
</Button>
|
|
</TabTrigger>
|
|
<TabTrigger name="tab2" asChild>
|
|
<Button preset="ghost" className="justify-center">
|
|
Tab 2
|
|
</Button>
|
|
</TabTrigger>
|
|
</TabList>
|
|
<TabContent name="tab1">
|
|
<div className="rounded-md bg-neutral-700 p-4">Tab 1 Content</div>
|
|
</TabContent>
|
|
<TabContent name="tab2">
|
|
<div className="rounded-md bg-neutral-700 p-4">Tab 2 Content</div>
|
|
</TabContent>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|