export function MilestoneStory()

in src/stories/DropdownMenu2/fixtures.stories.tsx [202:262]
59 lines of code
2 McCabe index (conditional complexity)

export function MilestoneStory(): JSX.Element {
  const [selectedIndex, setSelectedIndex] = React.useState(-1)

  const selectedMilestone = milestones[selectedIndex] as typeof milestones[0] | undefined

  return (
    <>
      <h1>Milestone selector</h1>
      <Box sx={{width: 200}}>
        <DropdownMenu>
          <DropdownMenu.Anchor aria-label="Select a project">
            <DropdownMenu.Anchor>
              <Button
                aria-label="Select iteration duration"
                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
              </Button>
            </DropdownMenu.Anchor>
          </DropdownMenu.Anchor>
          <DropdownMenu.Overlay width="medium">
            <ActionList showDividers>
              {milestones.map((milestone, index) => (
                <ActionList.Item
                  key={index}
                  selected={index === selectedIndex}
                  onSelect={() => setSelectedIndex(index)}
                >
                  <ActionList.LeadingVisual>
                    <MilestoneIcon />
                  </ActionList.LeadingVisual>
                  {milestone.name}
                  <ActionList.Description variant="block">Due by {milestone.due}</ActionList.Description>
                </ActionList.Item>
              ))}
            </ActionList>
          </DropdownMenu.Overlay>
        </DropdownMenu>
        {selectedMilestone ? (
          <Text as="div" color="fg.muted" sx={{fontSize: 1, mt: 2}}>
            <ProgressBar progress={selectedMilestone.progress} sx={{mb: 2}} />
            {selectedMilestone.name}
          </Text>
        ) : (
          <Text as="div" color="fg.muted" sx={{fontSize: 1, mt: 2}}>
            No milestone
          </Text>
        )}
      </Box>
    </>
  )
}