Side Modal

import React, { useState } from "react";
import { SideModal } from "@nimbus-ds/patterns";
import { Box, Button, Icon, Text } from "@nimbus-ds/components";
import { CheckCircleIcon, ChevronLeftIcon } from "@nimbus-ds/icons";

const Example: React.FC = () => {
  const [open, setOpen] = useState(false);
  const handleOpen = () => setOpen(!open);

  const headerAction = (
    <Box display="flex" alignItems="center" gap="1">
      <Icon color="primary-textHigh" source={<ChevronLeftIcon />} />
      <Text fontWeight="bold" fontSize="highlight">
        Formas de entrega
      </Text>
    </Box>
  );

  return (
    <>
      <Button onClick={handleOpen}>Open</Button>
      <SideModal
        onRemove={handleOpen}
        open={open}
        maxWidth={{ xs: "100%", md: "340px", lg: "540px" }}
        title="Instalar Kangu"
        headerIcon={
          <Icon color="primary-textHigh" source={<CheckCircleIcon />} />
        }
        padding="base"
        paddingHeader="none"
        paddingBody="none"
        paddingFooter="none"
        headerAction={headerAction}
        footer={{
          primaryAction: { children: "Button" },
          secondaryAction: { children: "Button", appearance: "primary" },
        }}
      >
        <Box
          borderStyle="dashed"
          borderWidth="1"
          borderColor="neutral-interactive"
          height="100%"
          boxSizing="border-box"
          display="flex"
          justifyContent="center"
          alignItems="center"
        >
          <Text textAlign="center" fontSize="base">
            Replace me with your content
          </Text>
        </Box>
      </SideModal>
    </>
  );
};

export default Example;