in src/stories/DropdownMenu2/fixtures.stories.tsx [143:191]
export function MemexAddColumn(): JSX.Element {
const [selectedIndex, setSelectedIndex] = React.useState(0)
const selectedType = fieldTypes[selectedIndex]
const [duration, setDuration] = React.useState(1)
return (
<>
<h1>Memex Add column</h1>
<Box as="form" sx={{display: 'flex', flexDirection: 'column', width: 200}}>
<TextInput defaultValue="Estimate" aria-label="Field Name" sx={{mb: 2}} />
<DropdownMenu>
<DropdownMenu.Button aria-label="Select field type" leadingIcon={selectedType.icon}>
{selectedType.name}
</DropdownMenu.Button>
<DropdownMenu.Overlay width="medium">
<ActionList>
{fieldTypes.map((type, index) => (
<ActionList.Item
key={index}
selected={index === selectedIndex}
onSelect={() => setSelectedIndex(index)}
>
{type.icon} {type.name}
</ActionList.Item>
))}
</ActionList>
</DropdownMenu.Overlay>
</DropdownMenu>
<Text sx={{fontSize: 0, color: 'fg.muted', mt: 3, mb: 1}}>Options</Text>
<Box sx={{display: 'flex', alignItems: 'center'}}>
<Text sx={{fontSize: 1}}>Duration:</Text>
<DropdownMenu>
<DropdownMenu.Button
id="duration"
aria-label="Select field type"
sx={{textAlign: 'left', ml: 2, flexGrow: 1}}
>
{duration} {duration > 1 ? 'weeks' : 'week'}
</DropdownMenu.Button>
<DropdownMenu.Overlay width="medium">
<ActionList>
{[1, 2, 3, 4, 5, 6].map(weeks => (
<ActionList.Item key={weeks} selected={duration === weeks} onSelect={() => setDuration(weeks)}>
{weeks} {weeks > 1 ? 'weeks' : 'week'}
</ActionList.Item>
))}