feat: Select component

src/pages/Questions/Select.tsx

@@ -0,0 +1,109 @@
+import { useState } from "react";
+import {
+  Select as MuiSelect,
+  MenuItem,
+  FormControl,
+  useTheme,
+} from "@mui/material";
+
+import ArrowDown from "@icons/ArrowDownIcon";
+
+import type { SelectChangeEvent, SxProps } from "@mui/material";
+
+type SelectProps = {
+  items: string[];
+  empty?: boolean;
+  onChange?: (num: number) => void;
+  sx?: SxProps;
+};
+
+export const Select = ({ items, empty, onChange, sx }: SelectProps) => {
+  const [activeItem, setActiveItem] = useState<number>(empty ? -1 : 0);
+
+  const theme = useTheme();
+
+  const handleChange = (event: SelectChangeEvent) => {
+    setActiveItem(Number(event.target.value));
+    onChange?.(Number(event.target.value));
+  };
+
+  return (
+    <FormControl
+      fullWidth
+      size="small"
+      sx={{
+        width: "100%",
+        height: "48px",
+        ...sx,
+      }}
+    >
+      <MuiSelect
+        id="display-select"
+        variant="outlined"
+        value={String(activeItem)}
+        displayEmpty
+        onChange={handleChange}
+        sx={{
+          width: "100%",
+          height: "48px",
+          borderRadius: "8px",
+          "& .MuiOutlinedInput-notchedOutline": {
+            border: `1px solid ${theme.palette.brightPurple.main} !important`,
+            height: "48px",
+            borderRadius: "10px",
+          },
+        }}
+        MenuProps={{
+          PaperProps: {
+            sx: {
+              mt: "8px",
+              p: "4px",
+              borderRadius: "8px",
+              border: "1px solid #EEE4FC",
+              boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)",
+            },
+          },
+          MenuListProps: {
+            sx: {
+              py: 0,
+              display: "flex",
+              flexDirection: "column",
+              gap: "8px",
+              "& .Mui-selected": {
+                backgroundColor: theme.palette.background.default,
+                color: theme.palette.brightPurple.main,
+              },
+            },
+          },
+        }}
+        inputProps={{
+          sx: {
+            color: theme.palette.brightPurple.main,
+            display: "flex",
+            alignItems: "center",
+            px: "9px",
+            gap: "20px",
+          },
+        }}
+        IconComponent={(props) => <ArrowDown {...props} />}
+      >
+        {items.map((item, index) => (
+          <MenuItem
+            key={item + index}
+            value={index}
+            sx={{
+              display: "flex",
+              alignItems: "center",
+              gap: "20px",
+              padding: "10px",
+              borderRadius: "5px",
+              color: theme.palette.grey2.main,
+            }}
+          >
+            {item}
+          </MenuItem>
+        ))}
+      </MuiSelect>
+    </FormControl>
+  );
+};

src/pages/Questions/branchingQuestions.tsx

@@ -5,26 +5,24 @@ import {
   FormControlLabel,
   IconButton,
   Link,
-  MenuItem,
   Modal,
   Radio,
   RadioGroup,
-  Select,
-  SelectChangeEvent,
-  TextField,
   Typography,
   useTheme,
 } from "@mui/material";
 import * as React from "react";
-import ArrowDown from "@icons/ArrowDownIcon";
 import { useState } from "react";
 import { questionStore, resetSomeField } from "@root/questions";
+import { Select } from "./Select";
 import DeleteIcon from "@icons/questionsPage/deleteIcon";
 import RadioCheck from "@ui_kit/RadioCheck";
 import RadioIcon from "@ui_kit/RadioIcon";
-import InfoIcon from "../../assets/icons/Info";
+import InfoIcon from "@icons/Info";
 
 export default function BranchingQuestions() {
+  const [value, setValue] = useState("1");
+  const [conditionSelected, setConditionSelected] = useState<boolean>(false);
   const { openedModalSettings } = questionStore();
   const theme = useTheme();
 
@@ -32,12 +30,6 @@ export default function BranchingQuestions() {
   const handleClose = () => {
     resetSomeField({ openedModalSettings: "" });
   };
-  const [display, setDisplay] = React.useState("1");
-  const handleChange = (event: SelectChangeEvent) => {
-    setDisplay(event.target.value);
-  };
-
-  const [value, setValue] = React.useState("1");
 
   const handleChangeRadio = (event: React.ChangeEvent<HTMLInputElement>) => {
     setValue((event.target as HTMLInputElement).value);
@@ -92,90 +84,10 @@ export default function BranchingQuestions() {
                 alignItems: "center",
               }}
             >
-              <FormControl
+              <Select
-                fullWidth
+                items={["Показать", "Скрыть"]}
-                size="small"
+                sx={{ maxWidth: "140px" }}
-                sx={{
+              />
-                  width: "100%",
-                  maxWidth: "140px",
-                  height: "48px",
-                }}
-              >
-                <Select
-                  id="display-select"
-                  variant="outlined"
-                  value={display}
-                  displayEmpty
-                  onChange={handleChange}
-                  sx={{
-                    height: "48px",
-                    borderRadius: "8px",
-                    "& .MuiOutlinedInput-notchedOutline": {
-                      border: `1px solid ${theme.palette.brightPurple.main} !important`,
-                    },
-                  }}
-                  MenuProps={{
-                    PaperProps: {
-                      sx: {
-                        mt: "8px",
-                        p: "4px",
-                        borderRadius: "8px",
-                        border: "1px solid #EEE4FC",
-                        boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)",
-                      },
-                    },
-                    MenuListProps: {
-                      sx: {
-                        py: 0,
-                        display: "flex",
-                        flexDirection: "column",
-                        gap: "8px",
-                        "& .Mui-selected": {
-                          backgroundColor: theme.palette.background.default,
-                          color: theme.palette.brightPurple.main,
-                        },
-                      },
-                    },
-                  }}
-                  inputProps={{
-                    sx: {
-                      color: theme.palette.brightPurple.main,
-                      display: "flex",
-                      alignItems: "center",
-                      px: "9px",
-                      gap: "20px",
-                    },
-                  }}
-                  IconComponent={(props) => <ArrowDown {...props} />}
-                >
-                  <MenuItem
-                    value={1}
-                    sx={{
-                      display: "flex",
-                      alignItems: "center",
-                      gap: "20px",
-                      padding: "10px",
-                      borderRadius: "5px",
-                      color: theme.palette.grey2.main,
-                    }}
-                  >
-                    Показать
-                  </MenuItem>
-                  <MenuItem
-                    value={2}
-                    sx={{
-                      display: "flex",
-                      alignItems: "center",
-                      gap: "20px",
-                      padding: "10px",
-                      borderRadius: "5px",
-                      color: theme.palette.grey2.main,
-                    }}
-                  >
-                    Скрыть
-                  </MenuItem>
-                </Select>
-              </FormControl>
               <Typography sx={{ color: theme.palette.grey2.main }}>
                 если в ответе на вопрос
               </Typography>
@@ -194,60 +106,40 @@ export default function BranchingQuestions() {
                     display: "flex",
                     justifyContent: "space-between",
                     alignItems: "center",
-                    pb: "14px",
+                    pb: "5px",
                   }}
                 >
-                  <Typography>Условие 1</Typography>
+                  <Typography sx={{ color: "#4D4D4D", fontWeight: "500" }}>
+                    Условие 1
+                  </Typography>
                   <IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
                     <DeleteIcon color={"#4D4D4D"} />
                   </IconButton>
                 </Box>
-
+                <Select
-                <TextField
+                  empty
-                  // value={text}
+                  items={["Условие 1", "Условие 2", "Условие 3"]}
-                  fullWidth
+                  onChange={() => setConditionSelected(true)}
-                  sx={{
+                  sx={{ marginBottom: "15px" }}
-                    pb: "20px",
-                    "& .MuiInputBase-root": {
-                      backgroundColor: "#F2F3F7",
-                      height: "48px",
-                      borderRadius: "10px",
-                    },
-                  }}
-                  inputProps={{
-                    sx: {
-                      borderRadius: "10px",
-                      fontSize: "18px",
-                      lineHeight: "21px",
-                      py: 0,
-                    },
-                  }}
-                />
-                <Box sx={{ display: "flex", alignItems: "center", pb: "14px" }}>
-                  <Typography>Дан ответ</Typography>
-                  <Typography sx={{ color: "#7E2AEA", pl: "10px" }}>
-                    (Укажите один или несколько вариантов)
-                  </Typography>
-                </Box>
-                <TextField
-                  // value={text}
-                  fullWidth
-                  sx={{
-                    "& .MuiInputBase-root": {
-                      backgroundColor: "#F2F3F7",
-                      height: "48px",
-                      borderRadius: "10px",
-                    },
-                  }}
-                  inputProps={{
-                    sx: {
-                      borderRadius: "10px",
-                      fontSize: "18px",
-                      lineHeight: "21px",
-                      py: 0,
-                    },
-                  }}
                 />
+                {conditionSelected && (
+                  <>
+                    <Box
+                      sx={{ display: "flex", alignItems: "center", pb: "10px" }}
+                    >
+                      <Typography sx={{ color: "#4D4D4D", fontWeight: "500" }}>
+                        Дан ответ
+                      </Typography>
+                      <Typography sx={{ color: "#7E2AEA", pl: "10px" }}>
+                        (Укажите один или несколько вариантов)
+                      </Typography>
+                    </Box>
+                    <Select
+                      empty
+                      items={["Условие 1", "Условие 2", "Условие 3"]}
+                    />
+                  </>
+                )}
               </Box>
             ) : (
               ""