export default function Example() {
  const triggerCss = {
    border: "none",
    color: "$gray80",
    padding: 0,
    backgroundColor: "transparent",
    fontWeight: "normal",
    textDecoration: "underline",
    "&:hover": {
      backgroundColor: "transparent",
    },
  };
  const Grid = styled("div", {
    display: "grid",
    gridTemplateRows: "auto auto auto",
    gridTemplateColumns: "auto auto auto auto auto",
    gridTemplateAreas:
      "'leftstart topstart topcenter topend rightstart' 'leftcenter blank blank blank rightcenter' 'leftend bottomstart bottomcenter bottomend rightend'",
    gap: "40px 105px",
  });

  return (
    <Grid>
      <Box css={{ gridArea: "leftstart" }}>
        <Popover.Root open={true}>
          <Popover.Trigger css={triggerCss}>Trigger</Popover.Trigger>
          <Popover.Portal>
            <Popover.Content side="left" align="start" width={116}>
              Left Start
            </Popover.Content>
          </Popover.Portal>
        </Popover.Root>
      </Box>
      <Box css={{ gridArea: "leftcenter" }}>
        <Popover.Root open={true}>
          <Popover.Trigger css={triggerCss}>Trigger</Popover.Trigger>
          <Popover.Portal>
            <Popover.Content side="left" align="center" width={116}>
              Left Center
            </Popover.Content>
          </Popover.Portal>
        </Popover.Root>
      </Box>
      <Box css={{ gridArea: "leftend" }}>
        <Popover.Root open={true}>
          <Popover.Trigger css={triggerCss}>Trigger</Popover.Trigger>
          <Popover.Portal>
            <Popover.Content side="left" align="end" width={116}>
              Left End
            </Popover.Content>
          </Popover.Portal>
        </Popover.Root>
      </Box>
      <Box css={{ gridArea: "topstart" }}>
        <Popover.Root open={true}>
          <Popover.Trigger css={triggerCss}>Trigger</Popover.Trigger>
          <Popover.Portal>
            <Popover.Content side="top" align="start" width={116}>
              Top Start
            </Popover.Content>
          </Popover.Portal>
        </Popover.Root>
      </Box>
      <Box css={{ gridArea: "topcenter" }}>
        <Popover.Root open={true}>
          <Popover.Trigger css={triggerCss}>Trigger</Popover.Trigger>
          <Popover.Portal>
            <Popover.Content side="top" align="center" width={116}>
              Top Center
            </Popover.Content>
          </Popover.Portal>
        </Popover.Root>
      </Box>
      <Box css={{ gridArea: "topend" }}>
        <Popover.Root open={true}>
          <Popover.Trigger css={triggerCss}>Trigger</Popover.Trigger>
          <Popover.Portal>
            <Popover.Content side="top" align="end" width={116}>
              Top End
            </Popover.Content>
          </Popover.Portal>
        </Popover.Root>
      </Box>
      <Box css={{ gridArea: "bottomstart" }}>
        <Popover.Root open={true}>
          <Popover.Trigger css={triggerCss}>Trigger</Popover.Trigger>
          <Popover.Portal>
            <Popover.Content side="bottom" align="start" width={116}>
              Bottom Start
            </Popover.Content>
          </Popover.Portal>
        </Popover.Root>
      </Box>
      <Box css={{ gridArea: "bottomcenter" }}>
        <Popover.Root open={true}>
          <Popover.Trigger css={triggerCss}>Trigger</Popover.Trigger>
          <Popover.Portal>
            <Popover.Content side="bottom" align="center" width={116}>
              Bottom Center
            </Popover.Content>
          </Popover.Portal>
        </Popover.Root>
      </Box>
      <Box css={{ gridArea: "bottomend" }}>
        <Popover.Root open={true}>
          <Popover.Trigger css={triggerCss}>Trigger</Popover.Trigger>
          <Popover.Portal>
            <Popover.Content side="bottom" align="end" width={116}>
              Bottom End
            </Popover.Content>
          </Popover.Portal>
        </Popover.Root>
      </Box>
      <Box css={{ gridArea: "rightstart" }}>
        <Popover.Root open={true}>
          <Popover.Trigger css={triggerCss}>Trigger</Popover.Trigger>
          <Popover.Portal>
            <Popover.Content side="right" align="start" width={116}>
              Right Start
            </Popover.Content>
          </Popover.Portal>
        </Popover.Root>
      </Box>
      <Box css={{ gridArea: "rightcenter" }}>
        <Popover.Root open={true}>
          <Popover.Trigger css={triggerCss}>Trigger</Popover.Trigger>
          <Popover.Portal>
            <Popover.Content side="right" align="center" width={116}>
              Right Center
            </Popover.Content>
          </Popover.Portal>
        </Popover.Root>
      </Box>
      <Box css={{ gridArea: "rightend" }}>
        <Popover.Root open={true}>
          <Popover.Trigger css={triggerCss}>Trigger</Popover.Trigger>
          <Popover.Portal>
            <Popover.Content side="right" align="end" width={116}>
              Right End
            </Popover.Content>
          </Popover.Portal>
        </Popover.Root>
      </Box>
    </Grid>
  );
}

To enter the code editing mode, press Enter. To exit the edit mode, press Escape

You are editing the code. To exit the edit mode, press Escape