feat: CustomTextField error

src/pages/Questions/SliderOptions/SliderOptions.tsx

@@ -1,7 +1,7 @@
+import { useState } from "react";
 import { useParams } from "react-router-dom";
 import { Box, Typography } from "@mui/material";
 import ButtonsOptions from "../ButtonsOptions";
-import React from "react";
 import CustomNumberField from "@ui_kit/CustomNumberField";
 import SwitchSlider from "./switchSlider";
 import { questionStore, updateQuestionsList } from "@root/questions";
@@ -11,7 +11,8 @@ interface Props {
 }
 
 export default function SliderOptions({ totalIndex }: Props) {
-  const [switchState, setSwitchState] = React.useState("setting");
+  const [switchState, setSwitchState] = useState("setting");
+  const [stepError, setStepError] = useState("");
   const quizId = Number(useParams().quizId);
   const { listQuestions } = questionStore();
 
@@ -151,6 +152,7 @@ export default function SliderOptions({ totalIndex }: Props) {
               min={0}
               max={100}
               placeholder={"1"}
+              error={stepError}
               value={String(listQuestions[quizId][totalIndex].content.step)}
               onChange={({ target }) => {
                 const clonContent = listQuestions[quizId][totalIndex].content;
@@ -177,6 +179,16 @@ export default function SliderOptions({ totalIndex }: Props) {
                     },
                   });
                 }
+
+                if (range % step) {
+                  setStepError(
+                    `Шаг должен делить без остатка диапазон ${max} - ${min} = ${
+                      max - min
+                    }`
+                  );
+                } else {
+                  setStepError("");
+                }
               }}
             />
           </Box>

src/ui_kit/CustomNumberField.tsx

@@ -8,6 +8,7 @@ interface CustomNumberFieldProps {
   onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
   onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
   onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+  error?: string;
   value: string;
   sx?: SxProps<Theme>;
   min?: number;
@@ -18,6 +19,7 @@ export default function CustomNumberField({
   placeholder,
   value,
   sx,
+  error,
   onChange,
   onKeyDown,
   onBlur,
@@ -42,6 +44,7 @@ export default function CustomNumberField({
     <CustomTextField
       placeholder={placeholder}
       sx={sx}
+      error={error}
       onChange={onInputChange}
       onKeyDown={onKeyDown}
       onBlur={onBlur}

src/ui_kit/CustomTextField.tsx

@@ -11,6 +11,7 @@ import type { ChangeEvent, KeyboardEvent, FocusEvent } from "react";
 interface CustomTextFieldProps {
   placeholder: string;
   value?: string;
+  error?: string;
   onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
   onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
   onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
@@ -23,6 +24,7 @@ export default function CustomTextField({
   value,
   text,
   sx,
+  error,
   onChange,
   onKeyDown,
   onBlur,
@@ -36,6 +38,8 @@ export default function CustomTextField({
         fullWidth
         value={value}
         placeholder={placeholder}
+        error={!!error}
+        label={error}
         onChange={onChange}
         onKeyDown={onKeyDown}
         onBlur={onBlur}
@@ -45,6 +49,10 @@ export default function CustomTextField({
             height: "48px",
             borderRadius: "10px",
           },
+          "& .MuiInputLabel-root": {
+            fontSize: "13.5px",
+            marginTop: "3px",
+          },
           ...sx,
         }}
         inputProps={{