2022-04-14 10:14:23 +00:00
|
|
|
import { ComponentMeta, Story } from '@storybook/react';
|
|
|
|
import { useState } from 'react';
|
|
|
|
|
|
|
|
import { NavTabs, type Option } from './NavTabs';
|
|
|
|
|
|
|
|
export default {
|
|
|
|
title: 'Components/NavTabs',
|
|
|
|
component: NavTabs,
|
|
|
|
} as ComponentMeta<typeof NavTabs>;
|
|
|
|
|
|
|
|
type Args = {
|
|
|
|
options: Option[];
|
|
|
|
};
|
|
|
|
|
|
|
|
function Template({ options = [] }: Args) {
|
|
|
|
const [selected, setSelected] = useState(
|
|
|
|
options.length ? options[0].id : undefined
|
|
|
|
);
|
|
|
|
|
|
|
|
return (
|
2022-09-13 13:56:38 +00:00
|
|
|
<NavTabs
|
|
|
|
options={options}
|
|
|
|
selectedId={selected}
|
|
|
|
onSelect={(value) => setSelected(value)}
|
|
|
|
/>
|
2022-04-14 10:14:23 +00:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
export const Example: Story<Args> = Template.bind({});
|
|
|
|
Example.args = {
|
|
|
|
options: [
|
|
|
|
{ children: 'Content 1', id: 'option1', label: 'Option 1' },
|
|
|
|
{ children: 'Content 2', id: 'option2', label: 'Option 2' },
|
|
|
|
],
|
|
|
|
};
|