93 lines
2.3 KiB
TypeScript
93 lines
2.3 KiB
TypeScript
import { FC } from "react";
|
||
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
|
||
import { StepButtonsBlock } from "../StepButtonsBlock";
|
||
import { SettingItem } from "./SettingItem/SettingItem";
|
||
import { SelectedQuestions, SelectedTags } from "../types";
|
||
|
||
type AmoSettingsBlockProps = {
|
||
stepTitles: string[];
|
||
selectedFunnel: string | null;
|
||
selectedStage: string | null;
|
||
selectedDealUser: string | null;
|
||
selectedQuestions: SelectedQuestions;
|
||
selectedTags: SelectedTags;
|
||
toBack: () => void
|
||
setStep: (step: number) => void
|
||
};
|
||
|
||
export const SettingsBlock: FC<AmoSettingsBlockProps> = ({
|
||
stepTitles,
|
||
selectedFunnel,
|
||
selectedDealUser,
|
||
selectedStage,
|
||
selectedQuestions,
|
||
selectedTags,
|
||
toBack,
|
||
setStep,
|
||
}) => {
|
||
const theme = useTheme();
|
||
const isMobile = useMediaQuery(theme.breakpoints.down(600));
|
||
|
||
return (
|
||
<Box sx={{ flexGrow: 1, width: "100%", height: "100%"}}>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
height: "100%",
|
||
flexGrow: 1,
|
||
}}
|
||
>
|
||
<Typography
|
||
sx={{
|
||
fontSize: "24px",
|
||
fontWeight: 500,
|
||
lineHeight: "28.44px"
|
||
|
||
}}
|
||
>
|
||
Мои настройки
|
||
</Typography>
|
||
<Box
|
||
sx={{
|
||
marginTop: "20px",
|
||
width: "100%",
|
||
minHheight: "440px",
|
||
maxHeight: "90%",
|
||
borderRadius: "10px",
|
||
padding: " 0 20px",
|
||
boxShadow: "0 0 20px rgba(0, 0, 0, 0.15)",
|
||
overflowY: "auto",
|
||
flexGrow: 1,
|
||
}}
|
||
>
|
||
{stepTitles &&
|
||
stepTitles.map((title, index) => (
|
||
<SettingItem
|
||
step={index+1}
|
||
title={title}
|
||
selectedDealUser={selectedDealUser}
|
||
selectedFunnel={selectedFunnel}
|
||
selectedStage={selectedStage}
|
||
selectedQuestions={selectedQuestions}
|
||
selectedTags={selectedTags}
|
||
|
||
setStep={setStep}
|
||
/>
|
||
))}
|
||
</Box>
|
||
<Box
|
||
sx={{
|
||
alignSelf: "end",
|
||
}}
|
||
>
|
||
<StepButtonsBlock
|
||
onSmallBtnClick={toBack}
|
||
isLargeBtnMissing={true}
|
||
/>
|
||
</Box>
|
||
</Box>
|
||
</Box>
|
||
);
|
||
};
|