export default function Example() {
  const items = new Array(4).fill("");
  const [page, setPage] = useState(0);
  const [intervalId, setIntervalId] = useState();

  function handlePlayPauseClick() {
    const wrapPages = (currentPage) => {
      if (currentPage < items.length - 1) {
        return currentPage + 1;
      } else {
        return 0;
      }
    };

    if (intervalId) {
      clearInterval(intervalId);
      setIntervalId(undefined);
    } else {
      const id = setInterval(() => {
        setPage(wrapPages);
      }, 2000);
      setPage(wrapPages);
      setIntervalId(id);
    }
  }

  return (
    <Box
      css={{
        paddingInline: "$100",
        width: "100vw",
      }}
    >
      <Carousel.Root
        itemsPerPage={1}
        css={{ position: "relative", maxWidth: "928px", marginInline: "auto" }}
        aria-label="Slideshow"
        page={page}
        onPageChange={(p) => {
          setPage(p);
        }}
      >
        <Box
          css={{
            display: "flex",
            gap: "$025",
            position: "absolute",
            insetInlineEnd: "$025",
            insetBlockEnd: "$300",
            zIndex: 1,
          }}
        >
          <Carousel.PreviousButton />
          <Button
            variant="primary"
            icon={"center"}
            aria-label="Start slide rotation"
            onClick={handlePlayPauseClick}
          >
            <Icon>{intervalId ? <Pause /> : <Play />}</Icon>
          </Button>
          <Carousel.NextButton />
        </Box>
        <Carousel.Content aria-live={intervalId ? "off" : "polite"}>
          {items.map((_, i) => (
            <Carousel.Item key={`item${i}`} css={{}}>
              <Box as="figure" css={{ margin: 0 }}>
                <img
                  src="/img/components/carousel/slideshow.png"
                  alt="The U.S. capital building at night"
                />
                <Box as="figcaption">(Tom Pennington/Getty Images)</Box>
              </Box>
            </Carousel.Item>
          ))}
        </Carousel.Content>
        <Carousel.Footer>
          <Carousel.Dots />
        </Carousel.Footer>
      </Carousel.Root>
    </Box>
  );
}

To enter the code editing mode, press Enter. To exit the edit mode, press Escape

You are editing the code. To exit the edit mode, press Escape