issue.tsx

import { useEffect, useState } from "react";
import globalStyles from "../../styles/Page.module.css";
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import styles from "./NewODGame.module.css";
import {
  Box,
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  Button,
  ButtonGroup,
  Heading,
  NumberDecrementStepper,
  NumberIncrementStepper,
  NumberInput,
  NumberInputField,
  NumberInputStepper,
  Slider,
  SliderFilledTrack,
  SliderThumb,
  SliderTrack,
} from "@chakra-ui/react";
import { ChevronRightIcon } from "@chakra-ui/icons";

export function NewODGame() {
  const [playerCount, setPlayerCount] = useState<number>(1);

  const [inputVal, setInputVal] = useState<string>("0");

  useEffect(() => {
    const int = parseInt(inputVal);
    if (!isNaN(int) && int <= 15 && int >= 1 && typeof int === "number") {
      setPlayerCount(int);
    }
  }, [inputVal]);

  return (
    <div className={globalStyles.fullPage}>
      <main className={globalStyles.page}>
        <Box mb={8}>
          <Heading>Select player count:</Heading>
          <Breadcrumb
            spacing="8px"
            separator={<ChevronRightIcon color="gray.500" />}
            w={"max-content"}
          >
            <BreadcrumbItem isCurrentPage>
              <BreadcrumbLink href="#">Select Player Count</BreadcrumbLink>
            </BreadcrumbItem>

            <BreadcrumbItem>
              <BreadcrumbLink href="#">...</BreadcrumbLink>
            </BreadcrumbItem>

            <BreadcrumbItem>
              <BreadcrumbLink href="#">...</BreadcrumbLink>
            </BreadcrumbItem>
          </Breadcrumb>
        </Box>
        <NumberInput
          value={inputVal}
          max={15}
          min={1}
          textAlign={"center"}
          onChange={setInputVal}
          w={"6em"}
          display={"block"}
          key={"fire"}
        >
          <NumberInputField key={"firiri"} />
          <NumberInputStepper>
            <NumberIncrementStepper /> <NumberDecrementStepper />
          </NumberInputStepper>
        </NumberInput>
        <Slider
          max={15}
          min={1}
          step={1}
          value={(() => {
            if (typeof playerCount === "number") {
              return playerCount;
            } else return 0;
          })()}
          onChange={setPlayerCount}
          maxW={"300px"}
        >
          <SliderTrack>
            <SliderFilledTrack />
          </SliderTrack>
          <SliderThumb />
        </Slider>
        <ButtonGroup alignSelf={"flex-end"}>
          <Button>Back</Button>
          <Button colorScheme={"blue"}>Continue </Button>
        </ButtonGroup>
      </main>
    </div>
  );
}