export function GroupsAndDescription()

in src/stories/DropdownMenu2/examples.stories.tsx [113:187]
74 lines of code
2 McCabe index (conditional complexity)

export function GroupsAndDescription(): JSX.Element {
  const [selectedMilestone, setSelectedMilestone] = React.useState<typeof milestones[0] | undefined>()

  return (
    <>
      <h1>Milestone selector</h1>
      <Box sx={{width: 200}}>
        <DropdownMenu>
          <DropdownMenu.Button
            aria-label="Select a milestone"
            variant="invisible"
            trailingIcon={GearIcon}
            sx={{
              color: 'fg.muted',
              width: '100%',
              paddingX: 0,
              gridTemplateColumns: 'min-content 1fr min-content',
              textAlign: 'left',
              ':hover, :focus': {background: 'none !important', color: 'accent.fg'}
            }}
          >
            Milestone
          </DropdownMenu.Button>
          <DropdownMenu.Overlay width="medium">
            <ActionList showDividers role="none">
              <ActionList.Group title="Open" role="menu">
                {milestones
                  .filter(milestone => !milestone.name.includes('21'))
                  .map((milestone, index) => (
                    <ActionList.Item
                      key={index}
                      selected={milestone.name === selectedMilestone?.name}
                      onSelect={() => setSelectedMilestone(milestone)}
                    >
                      <ActionList.LeadingVisual>
                        <MilestoneIcon />
                      </ActionList.LeadingVisual>
                      {milestone.name}
                      <ActionList.Description variant="block">Due by {milestone.due}</ActionList.Description>
                    </ActionList.Item>
                  ))}
              </ActionList.Group>
              <ActionList.Group title="Closed" role="menu">
                {milestones
                  .filter(milestone => milestone.name.includes('21'))
                  .map((milestone, index) => (
                    <ActionList.Item
                      key={index}
                      selected={milestone.name === selectedMilestone?.name}
                      onSelect={() => setSelectedMilestone(milestone)}
                    >
                      <ActionList.LeadingVisual>
                        <MilestoneIcon />
                      </ActionList.LeadingVisual>
                      {milestone.name}
                      <ActionList.Description variant="block">Due by {milestone.due}</ActionList.Description>
                    </ActionList.Item>
                  ))}
              </ActionList.Group>
            </ActionList>
          </DropdownMenu.Overlay>
        </DropdownMenu>
        {selectedMilestone ? (
          <Text as="div" color="fg.muted" sx={{fontSize: 1, mt: 2}}>
            {selectedMilestone.name}
          </Text>
        ) : (
          <Text as="div" color="fg.muted" sx={{fontSize: 1, mt: 2}}>
            No milestone
          </Text>
        )}
      </Box>
    </>
  )
}