export function MemexViewOptionsMenu()

in src/stories/ActionMenu2/fixtures.stories.tsx [399:497]
95 lines of code
1 McCabe index (conditional complexity)

export function MemexViewOptionsMenu(): JSX.Element {
  const [open, setOpen] = React.useState(false)

  return (
    <>
      <h1>Memex View Options Menu</h1>
      <Box sx={{display: 'flex', alignItems: 'center'}}>
        <Text sx={{fontSize: 1, mr: 3}}>
          <StyledOcticon icon={ProjectIcon} sx={{mr: 2}} />
          React
        </Text>
        <ActionMenu open={open} onOpenChange={setOpen}>
          <ActionMenu.Button
            aria-label="Open View options menu"
            sx={{
              p: 0,
              width: 18,
              height: 18,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center'
            }}
          >
            <TriangleDownIcon />
          </ActionMenu.Button>

          <ActionMenu.Overlay width="medium">
            <ActionList>
              <ActionList.Group title="Layout">
                <li style={{listStyle: 'none'}}>
                  <Box sx={{mx: 3, display: 'flex'}}>
                    <LayoutToggleItem selected Icon={TableIcon}>
                      Table
                    </LayoutToggleItem>
                    <LayoutToggleItem selected={false} Icon={ProjectIcon}>
                      Board
                    </LayoutToggleItem>
                  </Box>
                </li>
              </ActionList.Group>
              <ActionList.Divider />

              <ActionList.Group title="Configuration">
                <ActionList.Item>
                  <ActionList.LeadingVisual>
                    <ListUnorderedIcon />
                  </ActionList.LeadingVisual>
                  Title, Assignees, Status, Labels, Repositories
                </ActionList.Item>
                <ActionList.Item>
                  <ActionList.LeadingVisual>
                    <ListUnorderedIcon />
                  </ActionList.LeadingVisual>
                  group: none
                </ActionList.Item>
                <ActionList.Item>
                  <ActionList.LeadingVisual>
                    <ArrowDownIcon />
                  </ActionList.LeadingVisual>
                  sort: manual
                </ActionList.Item>
                <ActionList.Item>
                  <ActionList.LeadingVisual>
                    <SearchIcon />
                  </ActionList.LeadingVisual>
                  Search or filter this view
                </ActionList.Item>
              </ActionList.Group>
              <ActionList.Divider />
              <ActionList.Item>
                <ActionList.LeadingVisual>
                  <PencilIcon />
                </ActionList.LeadingVisual>
                Rename view
              </ActionList.Item>
              <ActionList.Item>
                <ActionList.LeadingVisual>
                  <VersionsIcon />
                </ActionList.LeadingVisual>
                Save changes to new view
              </ActionList.Item>
              <ActionList.Item disabled>
                <ActionList.LeadingVisual>
                  <TrashIcon />
                </ActionList.LeadingVisual>
                Delete view
              </ActionList.Item>
              <ActionList.Divider />

              <li style={{listStyle: 'none'}}>
                <ViewChangeButtons setOpen={setOpen} />
              </li>
            </ActionList>
          </ActionMenu.Overlay>
        </ActionMenu>
      </Box>
    </>
  )
}