All files / app/components PlusMinusSelector.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import AddIcon from "@mui/icons-material/Add";
import RemoveIcon from "@mui/icons-material/Remove";
import { Box, IconButton, Typography } from "@mui/material";
import { theme } from "theme";
 
interface PlusMinusSelectorProps {
  onChange: (value: number) => void;
  value: number | undefined;
}
 
const PlusMinusSelector = ({ onChange, value }: PlusMinusSelectorProps) => {
  const handleDecrease = () => onChange(Math.max(0, (value ?? 0) - 1));
  const handleIncrease = () => onChange((value ?? 0) + 1);
 
  return (
    <Box
      display="flex"
      alignItems="center"
      justifyContent="space-evenly"
      gap={2}
    >
      <IconButton
        onClick={handleDecrease}
        sx={{
          borderRadius: "50%",
          border: `1px solid ${theme.palette.grey[300]}`,
          width: 30,
          height: 30,
        }}
        disabled={!value}
      >
        <RemoveIcon />
      </IconButton>
 
      <Typography sx={{ width: "30px", textAlign: "center" }}>
        {!value ? "Any" : value}
      </Typography>
 
      <IconButton
        onClick={handleIncrease}
        sx={{
          borderRadius: "50%",
          border: `1px solid ${theme.palette.grey[300]}`,
          width: 30,
          height: 30,
        }}
      >
        <AddIcon />
      </IconButton>
    </Box>
  );
};
 
export default PlusMinusSelector;