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> ); }