54 lines
1.1 KiB
TypeScript
54 lines
1.1 KiB
TypeScript
import { useState } from 'react';
|
||
import type { Story } from '@ladle/react';
|
||
|
||
import { DropdownSelectMenu } from '@/components/DropdownSelectMenu';
|
||
|
||
import { StoryWrapper } from '.ladle/components';
|
||
|
||
const exampleItems = [
|
||
{
|
||
value: '1',
|
||
label: 'Item 1',
|
||
slotBefore: '1️⃣',
|
||
},
|
||
{
|
||
value: '2',
|
||
label: 'Item 2',
|
||
slotBefore: '2️⃣',
|
||
},
|
||
{
|
||
value: '3',
|
||
label: 'Item 3',
|
||
slotBefore: '3️⃣',
|
||
},
|
||
{
|
||
value: '4',
|
||
label: 'Item 4',
|
||
slotBefore: '4️⃣',
|
||
},
|
||
];
|
||
|
||
export const DropdownSelectMenuStory: Story<Parameters<typeof DropdownSelectMenu>> = (args) => {
|
||
const [item, setItem] = useState(exampleItems[0].value);
|
||
return (
|
||
<StoryWrapper>
|
||
<DropdownSelectMenu
|
||
items={exampleItems}
|
||
value={item}
|
||
onValueChange={(value) => setItem(value)}
|
||
{...args}
|
||
/>
|
||
</StoryWrapper>
|
||
);
|
||
};
|
||
|
||
DropdownSelectMenuStory.args = {};
|
||
|
||
DropdownSelectMenuStory.argTypes = {
|
||
align: {
|
||
options: ['start', 'center', 'end'],
|
||
control: { type: 'select' },
|
||
defaultValue: 'center',
|
||
},
|
||
};
|