64 lines
1.6 KiB
TypeScript
64 lines
1.6 KiB
TypeScript
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));
|
||
return (
|
||
<Box
|
||
sx={{
|
||
marginTop: "20px",
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
alignItems: "center",
|
||
height: "100%",
|
||
flexGrow: 1,
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
marginTop: "20px",
|
||
width: "100%",
|
||
height: "420px",
|
||
borderRadius: "10px",
|
||
padding: "10px",
|
||
boxShadow: "0 0 20px rgba(0, 0, 0, 0.15)",
|
||
display: "flex",
|
||
overflowY: "auto",
|
||
flexWrap: "wrap",
|
||
}}
|
||
>
|
||
{/*TODO разобраться что за сущность и какая у нее логика*/}
|
||
{someItems &&
|
||
someItems.map((item) => (
|
||
<Item title={item} onAddBtnClick={() => {}} />
|
||
))}
|
||
</Box>
|
||
|
||
<Box
|
||
sx={{
|
||
marginTop: "20px",
|
||
alignSelf: "end",
|
||
lineHeight: "1",
|
||
}}
|
||
>
|
||
<StepButtonsBlock
|
||
onSmallBtnClick={handlePrevStep}
|
||
onLargeBtnClick={handleNextStep}
|
||
/>
|
||
</Box>
|
||
</Box>
|
||
);
|
||
};
|