FinalProject/src/components/SetCount.jsx

import {Box, Button} from "@mui/material";
import {useEffect, useState} from "react";

export const SetCount = ({onCount}) => {
    let [count, setCount] = useState(1)

    useEffect(() => {
        onCount(count)
    }, [count, onCount])

    return (
        <Box sx={{display: 'flex', flexWrap: 'no-wrap'}}>
            <Button
                sx={{height: '55px', width: '50px', borderRadius: '0', color: '#000', borderColor: '#000', fontSize: '30px', fontWeight: '300'}}
                variant="outlined"
                color={"inherit"}
                onClick={() => setCount(count === 1 ? count : count-1)}
            >
                -
            </Button>
            <input disabled value={count} style={{boxSizing: 'border-box', height: '55px', width: '60px', textAlign: 'center', border: '0', backgroundColor: '#eaeaea'}}/>
            <Button
                sx={{height: '55px', width: '50px', borderRadius: '0', color: '#000', borderColor: '#000', fontSize: '30px', fontWeight: '300'}}
                variant="outlined"
                color={"inherit"}
                onClick={() => setCount(count === 100 ? count : count+1)}
            >
                +
            </Button>
        </Box>
    )
}