export default function Example() {
  return (
    <Box
      css={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
      }}
    >
      <Drawer.Root id="top-id">
        <Drawer.Trigger css={{ minWidth: "93px" }}>Top</Drawer.Trigger>
        <Drawer.Content position="top" height="200px">
          Your Drawer Content. Click scrim to close
        </Drawer.Content>
        <Drawer.Scrim />
      </Drawer.Root>
      <Box
        css={{
          display: "flex",
          gap: "$050",
          marginBlock: "$050",
        }}
      >
        <Drawer.Root id="left-id">
          <Drawer.Trigger css={{ minWidth: "93px" }}>Left</Drawer.Trigger>
          <Drawer.Content position="left">
            Your Drawer Content. Click scrim to close
          </Drawer.Content>
          <Drawer.Scrim />
        </Drawer.Root>
        <Drawer.Root id="right-id">
          <Drawer.Trigger css={{ minWidth: "93px" }}>Right</Drawer.Trigger>
          <Drawer.Content position="right">
            Your Drawer Content. Click scrim to close
          </Drawer.Content>
          <Drawer.Scrim />
        </Drawer.Root>
      </Box>
      <Drawer.Root id="bottom-id">
        <Drawer.Trigger css={{ minWidth: "93px" }}>Bottom</Drawer.Trigger>
        <Drawer.Content position="bottom" height="200px">
          Your Drawer Content. Click scrim to close
        </Drawer.Content>
        <Drawer.Scrim />
      </Drawer.Root>
    </Box>
  );
}

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