77 lines
1.9 KiB
TypeScript
77 lines
1.9 KiB
TypeScript
import { Box, useMediaQuery, useTheme } from "@mui/material";
|
|
import { FC } from "react";
|
|
import { StepButtonsBlock } from "../StepButtonsBlock/StepButtonsBlock";
|
|
import { CustomSelect } from "../../../../components/CustomSelect/CustomSelect";
|
|
import { CustomRadioGroup } from "../../../../components/CustomRadioGroup/CustomRadioGroup";
|
|
|
|
type Props = {
|
|
handlePrevStep: () => void;
|
|
handleNextStep: () => void;
|
|
selectedStepsPerformer: string | null;
|
|
setSelectedStepsPerformer: (value: string | null) => void;
|
|
selectedStep: string | null;
|
|
setSelectedStep: (value: string | null) => void;
|
|
pipelineId: string | null;
|
|
};
|
|
|
|
export const PipelineSteps: FC<Props> = ({
|
|
handlePrevStep,
|
|
handleNextStep,
|
|
selectedStepsPerformer,
|
|
setSelectedStepsPerformer,
|
|
selectedStep,
|
|
setSelectedStep,
|
|
pipelineId,
|
|
}) => {
|
|
const theme = useTheme();
|
|
const isMobile = useMediaQuery(theme.breakpoints.down(600));
|
|
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
|
|
|
|
return (
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
alignItems: "center",
|
|
height: "100%",
|
|
flexGrow: 1,
|
|
}}
|
|
>
|
|
<Box sx={{ width: "100%", marginTop: "20px", zIndex: 3 }}>
|
|
<CustomSelect
|
|
items={ }
|
|
selectedItemId={ }
|
|
setSelectedItem={ }
|
|
handleScroll={ }
|
|
/>
|
|
</Box>
|
|
<Box
|
|
sx={{
|
|
marginTop: "20px",
|
|
flexGrow: 1,
|
|
width: "100%",
|
|
height: "346px",
|
|
}}
|
|
>
|
|
<CustomRadioGroup
|
|
items={ }
|
|
selectedItemId={ }
|
|
setSelectedItem={ }
|
|
handleScroll={ }
|
|
/>
|
|
</Box>
|
|
<Box
|
|
sx={{
|
|
marginTop: "20px",
|
|
alignSelf: "end",
|
|
}}
|
|
>
|
|
<StepButtonsBlock
|
|
onLargeBtnClick={handleNextStep}
|
|
onSmallBtnClick={handlePrevStep}
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|