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',
|
|
},
|
|
};
|