export default function Example() {
  return (
    <Box css={{ display: "flex", flexDirection: "column", gap: "$100" }}>
      <Drawer.Root id="set-height">
        <Drawer.Trigger>See bottom example</Drawer.Trigger>
        <Drawer.Content height="200px">
          This drawer is set to 200px height.
        </Drawer.Content>
        <Drawer.Scrim />
      </Drawer.Root>
      <Drawer.Root id="set-width">
        <Drawer.Trigger>See left example</Drawer.Trigger>
        <Drawer.Content width="200px" position="left">
          This drawer is set to 200px width.
        </Drawer.Content>
        <Drawer.Scrim />
      </Drawer.Root>
    </Box>
  );
}