64 lines
1.5 KiB
TypeScript
64 lines
1.5 KiB
TypeScript
import { useState } from 'react';
|
|
import styled, { AnyStyledComponent } from 'styled-components';
|
|
import type { Story } from '@ladle/react';
|
|
|
|
import { SelectMenu, SelectItem } from '@/components/SelectMenu';
|
|
|
|
import { StoryWrapper } from '.ladle/components';
|
|
import { layoutMixins } from '@/styles/layoutMixins';
|
|
|
|
const exampleItems: { value: string; label: string }[] = [
|
|
{
|
|
value: '1',
|
|
label: 'Item 1',
|
|
},
|
|
{
|
|
value: '2',
|
|
label: 'Item 2',
|
|
},
|
|
{
|
|
value: '3',
|
|
label: 'Item 3',
|
|
},
|
|
{
|
|
value: '4',
|
|
label: 'Item 4',
|
|
},
|
|
];
|
|
|
|
export const SelectMenuStory: Story<Parameters<typeof SelectMenu>> = (args) => {
|
|
const [value, setValue] = useState(exampleItems[0].value);
|
|
const [value2, setValue2] = useState(exampleItems[2].value);
|
|
|
|
return (
|
|
<StoryWrapper>
|
|
<Styled.Container>
|
|
<SelectMenu value={value} onValueChange={setValue}>
|
|
{exampleItems.map(({ value, label }) => (
|
|
<SelectItem key={value} value={value} label={label} />
|
|
))}
|
|
</SelectMenu>
|
|
|
|
<SelectMenu value={value2} onValueChange={setValue2}>
|
|
{exampleItems.map(({ value, label }) => (
|
|
<SelectItem key={value} value={value} label={label} />
|
|
))}
|
|
</SelectMenu>
|
|
</Styled.Container>
|
|
</StoryWrapper>
|
|
);
|
|
};
|
|
|
|
const Styled: Record<string, AnyStyledComponent> = {};
|
|
|
|
Styled.Container = styled.section`
|
|
background: var(--color-layer-3);
|
|
|
|
${layoutMixins.container}
|
|
|
|
padding: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
`;
|