export function MemexAddColumn()

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>
                ))}