ModalSlideshow

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

  return (
    <>
      <Button text="Open the modal" onClick={() => setIsOpen(true)} />
      <ModalSlideshow
        slides={[
          {
            title: "Title slide 1",
            content: <p>Content slide 1</p>,
            illustration: <img src="/illustration-slide-1.webp" alt="" />,
          },
          {
            title: "Title slide 2",
            content: <p>Content slide 2</p>,
            illustration: <img src="/illustration-slide-2.webp" alt="" />,
          },
          {
            title: "Title slide 3",
            content: <p>Content slide 3</p>,
            illustration: <img src="/illustration-slide-3.webp" alt="" />,
          },
        ]}
        translations={{
          cancel: "Cancel",
          previous: "Back",
          next: "Next",
          done: "Action wording",
        }}
        isOpen={isOpen}
        onCancel={() => setIsOpen(false)}
        onClose={() => setIsOpen(false)}
        onDone={() => setIsOpen(false)}
      />
    </>
  );
};