WIP Step6 and Step 7

src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep6/IntegrationStep6.tsx

@@ -1,20 +1,24 @@
 import { Box, useMediaQuery, useTheme } from "@mui/material";
 import { FC } from "react";
 import { StepButtonsBlock } from "../StepButtonsBlock/StepButtonsBlock";
+import { Item } from "./Item/Item";
+import { someItems } from "../../mocks/MockData";
 
 type IntegrationStep6Props = {
   handlePrevStep: () => void;
+  handleNextStep: () => void;
 };
 
 export const IntegrationStep6: FC<IntegrationStep6Props> = ({
   handlePrevStep,
+  handleNextStep,
 }) => {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down(600));
-  const isTablet = useMediaQuery(theme.breakpoints.down(1000));
   return (
     <Box
       sx={{
+        marginTop: "20px",
         display: "flex",
         flexDirection: "column",
         alignItems: "center",
@@ -26,21 +30,32 @@ export const IntegrationStep6: FC<IntegrationStep6Props> = ({
         sx={{
           marginTop: "20px",
           width: "100%",
-          height: "100%",
+          height: "420px",
           borderRadius: "10px",
           padding: "10px",
           boxShadow: "0 0 20px rgba(0, 0, 0, 0.15)",
+          display: "flex",
+          overflowY: "auto",
+          flexWrap: "wrap",
         }}
-      ></Box>
+      >
+        {/*TODO разобраться что за сущность и какая у нее логика*/}
+        {someItems &&
+          someItems.map((item) => (
+            <Item title={item} onAddBtnClick={() => {}} />
+          ))}
+      </Box>
+
       <Box
         sx={{
           marginTop: "20px",
           alignSelf: "end",
+          lineHeight: "1",
         }}
       >
         <StepButtonsBlock
           onSmallBtnClick={handlePrevStep}
-          isLargeBtnMissing={true}
+          onLargeBtnClick={handleNextStep}
         />
       </Box>
     </Box>

src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep6/Item/Item.tsx

@@ -0,0 +1,63 @@
+import { Box, IconButton, Typography, useTheme } from "@mui/material";
+import AddPlus from "@icons/questionsPage/addPlus";
+import { FC } from "react";
+
+type ItemProps = {
+  title: string;
+  onAddBtnClick: () => void;
+};
+//TODO переименовать сущность
+export const Item: FC<ItemProps> = ({ title, onAddBtnClick }) => {
+  const theme = useTheme();
+
+  return (
+    <Box
+      sx={{
+        width: "172px",
+        height: "180px",
+        display: "flex",
+        flexDirection: "column",
+      }}
+    >
+      <Box
+        sx={{
+          alignSelf: "center",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          borderRadius: "12px",
+          backgroundColor: theme.palette.background.default,
+          width: "156px",
+          height: "40px",
+        }}
+      >
+        <Typography sx={{ fontSize: "16px", fontWeight: 500 }}>
+          {title}
+        </Typography>
+      </Box>
+      <IconButton
+        onClick={onAddBtnClick}
+        sx={{
+          width: "fit-content",
+          marginTop: "20px",
+          alignSelf: "center",
+          circle: {
+            fill: "#EEE4FC",
+          },
+          "&:hover": {
+            circle: {
+              fill: theme.palette.brightPurple.main,
+            },
+          },
+          "&:active": {
+            circle: {
+              fill: "#581CA7",
+            },
+          },
+        }}
+      >
+        <AddPlus />
+      </IconButton>
+    </Box>
+  );
+};

src/pages/IntegrationsPage/IntegrationsModal/IntegrationStep7/IntegrationStep6.tsx

@@ -0,0 +1,47 @@
+import { Box, useMediaQuery, useTheme } from "@mui/material";
+import { FC } from "react";
+import { StepButtonsBlock } from "../StepButtonsBlock/StepButtonsBlock";
+
+type IntegrationStep7Props = {
+  handlePrevStep: () => void;
+};
+
+export const IntegrationStep7: FC<IntegrationStep7Props> = ({
+  handlePrevStep,
+}) => {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down(600));
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        height: "100%",
+        flexGrow: 1,
+      }}
+    >
+      <Box
+        sx={{
+          marginTop: "20px",
+          width: "100%",
+          height: "100%",
+          borderRadius: "10px",
+          padding: "10px",
+          boxShadow: "0 0 20px rgba(0, 0, 0, 0.15)",
+        }}
+      ></Box>
+      <Box
+        sx={{
+          marginTop: "20px",
+          alignSelf: "end",
+        }}
+      >
+        <StepButtonsBlock
+          onSmallBtnClick={handlePrevStep}
+          isLargeBtnMissing={true}
+        />
+      </Box>
+    </Box>
+  );
+};

src/pages/IntegrationsPage/IntegrationsModal/IntegrationsModal.tsx

@@ -18,6 +18,7 @@ import { funnelsMock, performersMock, stagesMock } from "../mocks/MockData";
 import File from "@ui_kit/QuizPreview/QuizPreviewQuestionTypes/File";
 import { IntegrationsModalTitle } from "./IntegrationsModalTitle/IntegrationsModalTitle";
 import { SettingsBlock } from "./SettingsBlock/SettingsBlock";
+import { IntegrationStep7 } from "./IntegrationStep7/IntegrationStep6";
 
 type IntegrationsModalProps = {
   isModalOpen: boolean;
@@ -120,10 +121,20 @@ export const IntegrationsModal: FC<IntegrationsModalProps> = ({
           />
         ),
       },
+      {
+        title: "Соотнесение вопросов и сущностей",
+        isSettingsAvailable: true,
+        component: (
+          <IntegrationStep6
+            handlePrevStep={handlePrevStep}
+            handleNextStep={handleNextStep}
+          />
+        ),
+      },
       {
         title: "Добавление тегов",
         isSettingsAvailable: true,
-        component: <IntegrationStep6 handlePrevStep={handlePrevStep} />,
+        component: <IntegrationStep7 handlePrevStep={handlePrevStep} />,
       },
     ],
     [

src/pages/IntegrationsPage/mocks/MockData.ts

@@ -40,3 +40,11 @@ export const stagesMock = [
   "Этап 5",
   "Этап 6",
 ];
+
+export const someItems = [
+  "Контакты",
+  "Сделки",
+  "Компании",
+  "Пользователи",
+  "Покупатели",
+];