export default function Example() {
  const [amount, setAmount] = useState(5);
  const [index, setIndex] = useState(1);
  const Text = styled("h3", {
    textAlign: "center",
    fontSize: theme.fontSizes[100],
    fontWeight: theme.fontWeights["regular"],
    [`.${darkTheme} &`]: { color: theme.colors.primary },
  });

  useEffect(() => {
    setAmount(amount), [amount];
  }, []);
  return (
    <Box
      css={{
        display: "flex",
        flexDirection: "column",
        gap: theme.space[100],
        position: "relative",
        alignItems: "center",
      }}
    >
      <InputText
        id="id"
        type="number"
        min="0"
        value={amount}
        onChange={(e) => setAmount(e.target.value)}
        label="Total dots"
      />
      <Box
        css={{
          display: "flex",
          flexDirection: "row",
          gap: theme.space[100],
          alignItems: "center",
          paddingBottom: "$050",
        }}
      >
        <Button onClick={() => setIndex(index - 1 > 0 ? index - 1 : 1)}>
          -
        </Button>
        <Text>Index: {index}</Text>
        <Button
          onClick={() => setIndex(index + 1 < amount ? index + 1 : amount)}
        >
          +
        </Button>
      </Box>
      <PaginationDots
        index={index ? index : 1}
        amount={amount ? amount : 5}
        label="Pagination Dots controlled by buttons and input text"
      />
    </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