Drawer

() => {
  const [isOpen, setOpen] = React.useState(false);
  return (
    <>
      <Button 
        variant="secondary" 
        onClick={() => setOpen(true)}
      >
        Open
      </Button>
      <SimpleDrawer 
        isOpen={isOpen}
        onClose={() => setOpen(false)}
        title="A simple drawer"
        placement="bottom"
      >
        <Text>Place some content</Text>
      </SimpleDrawer>
    </>
  );
}

() => {
  const [isOpen, setOpen] = React.useState(false);
  return (
    <>
      <Button 
        variant="secondary" 
        onClick={() => setOpen(true)}
      >
        Open
      </Button>
      <Drawer isOpen={isOpen} onClose={() => setOpen(false)} placement="bottom">
        <DrawerOverlay />
        <DrawerContent>
          <DrawerCloseButton />
          <DrawerHeader>Welcome to the drawer</DrawerHeader>
          <DrawerBody>
            <Text>
              Drawers can be fun and contain lots of cool stuff
            </Text>
          </DrawerBody>
          <DrawerFooter>
            <Button onClick={() => setOpen(false)}>Close</Button>
          </DrawerFooter>
        </DrawerContent>
      </Drawer>
    </>
  );
}

() => {
  const [isOpen, setOpen] = React.useState(false);
  return (
    <>
      <Button 
        variant="secondary" 
        onClick={() => setOpen(true)}
      >
        Open
      </Button>
      <FullScreenDrawer title="Welcome to the drawer" isOpen={isOpen} onClose={() => setOpen(false)}>
          <Text>
            A full screen drawer is great for embedding full web pages, or large pieces of content.
          </Text>
      </FullScreenDrawer>
    </>
  );
}