Drawer

import { Video } from '@gympass/yoga-icons';
import { Button, Drawer, Box, Text } from '@gympass/yoga';

render(() => {
  const [isOpen, setIsOpen] = useState(false);

  const handleOpen = () => {
    setIsOpen(true);
  };

  const handleOnClose = () => {
    setIsOpen(false);
  };

  const handleOnAction = () => {
    alert('This is your custom action');
  };

  return (
    <>
      <Button onClick={handleOpen}>Open Drawer</Button>
        <Drawer isOpen={isOpen} onClose={handleOnClose}>
          <Drawer.Header>
            <Box display="flex" justifyContent="flex-end" alignItems="center" width="100%">
              <Box
                style={{
                  textAlign: 'center'
                }}
                width="100%"
              >Drawer title</Box>
            </Box>
          </Drawer.Header>
          <Drawer.Content>
            <Box
              display="flex"
              flexDirection="column"
              justifyContent="center"
              style={{
                paddingTop: 10,
                height: '100%'
              }}
            >
              <Video width="40" height="40" fill="#D8385E" />
              <Text.Medium  mt="large" fontSize="xxlarge">Learn how to edit this area</Text.Medium>
              <Text mt="xxssmall" color="light">Live the mission</Text>
              <Text mt="xxsmall" color="uplift">Watch de video</Text>
            </Box>
          </Drawer.Content>
          <Drawer.Footer>
            <Button onClick={handleOnAction}>large button</Button>
            <Button.Text onClick={handleOnClose}>Cancel</Button.Text>
          </Drawer.Footer>
        </Drawer>
    </>
  );
});
render(() => {
  const [isOpen, setIsOpen] = useState(false);

  const handleOpen = () => {
    setIsOpen(true);
  };

  const handleOnClose = () => {
    setIsOpen(false);
  };

  const handleOnAction = () => {
    alert('This is your custom action');
  };

  return (
    <>
      <Button onClick={handleOpen}>Open Drawer</Button>
        <Drawer isOpen={isOpen} onClose={handleOnClose}>
          <Drawer.Header>
            <Box display="flex" justifyContent="flex-end" alignItems="center" width="100%">
              <Box
                style={{
                  textAlign: 'center'
                }}
                width="100%"
              >Drawer title</Box>
            </Box>
          </Drawer.Header>
          <Drawer.Content>
            <Box
              display="flex"
              flexDirection="column"
              justifyContent="center"
              style={{
                paddingTop: 10,
                height: '100%'
              }}
            >
              <Video width="40" height="40" fill="#D8385E" />
              <Text.Medium  mt="large" fontSize="xxlarge">Learn how to edit this area</Text.Medium>
              <Text mt="xxssmall" color="light">Live the mission</Text>
              <Text mt="xxsmall" color="uplift">Watch de video</Text>
            </Box>
          </Drawer.Content>
          <Drawer.Footer>
            <Button onClick={handleOnAction}>large button</Button>
            <Button.Text onClick={handleOnClose}>Cancel</Button.Text>
          </Drawer.Footer>
        </Drawer>
    </>
  );
});