80 lines
2.0 KiB
TypeScript
80 lines
2.0 KiB
TypeScript
|
import { Box, Button, useTheme } from "@mui/material";
|
||
|
|
import ArrowLeft from "@icons/questionsPage/arrowLeft";
|
||
|
|
import { FC } from "react";
|
||
|
|
|
||
|
|
type StepButtonsBlockProps = {
|
||
|
|
onSmallBtnClick?: () => void;
|
||
|
|
onLargeBtnClick?: () => void;
|
||
|
|
isSmallBtnMissing?: boolean;
|
||
|
|
isLargeBtnMissing?: boolean;
|
||
|
|
isSmallBtnDisabled?: boolean;
|
||
|
|
isLargeBtnDisabled?: boolean;
|
||
|
|
smallBtnText?: string;
|
||
|
|
largeBtnText?: string;
|
||
|
|
largeBtnType?: "button" | "submit" | "reset";
|
||
|
|
};
|
||
|
|
|
||
|
|
export const StepButtonsBlock: FC<StepButtonsBlockProps> = ({
|
||
|
|
onSmallBtnClick,
|
||
|
|
onLargeBtnClick,
|
||
|
|
isSmallBtnMissing,
|
||
|
|
isLargeBtnMissing,
|
||
|
|
smallBtnText,
|
||
|
|
largeBtnText,
|
||
|
|
isSmallBtnDisabled,
|
||
|
|
isLargeBtnDisabled,
|
||
|
|
largeBtnType,
|
||
|
|
}) => {
|
||
|
|
const theme = useTheme();
|
||
|
|
return (
|
||
|
|
<Box
|
||
|
|
sx={{
|
||
|
|
display: "flex",
|
||
|
|
justifyContent: "end",
|
||
|
|
alignItems: "end",
|
||
|
|
gap: "10px",
|
||
|
|
mt: "20px"
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{isSmallBtnMissing || (
|
||
|
|
<Button
|
||
|
|
variant="outlined"
|
||
|
|
sx={{
|
||
|
|
padding: "10px 20px",
|
||
|
|
borderRadius: "8px",
|
||
|
|
height: "44px",
|
||
|
|
color: theme.palette.brightPurple.main,
|
||
|
|
}}
|
||
|
|
data-cy="back-button"
|
||
|
|
disabled={isSmallBtnDisabled}
|
||
|
|
onClick={onSmallBtnClick}
|
||
|
|
>
|
||
|
|
{smallBtnText ? (
|
||
|
|
smallBtnText
|
||
|
|
) : (
|
||
|
|
<ArrowLeft color={theme.palette.brightPurple.main} />
|
||
|
|
)}
|
||
|
|
</Button>
|
||
|
|
)}
|
||
|
|
{isLargeBtnMissing || (
|
||
|
|
<Button
|
||
|
|
data-cy="next-step"
|
||
|
|
variant="contained"
|
||
|
|
disabled={isLargeBtnDisabled}
|
||
|
|
type={largeBtnType ? largeBtnType : "button"}
|
||
|
|
sx={{
|
||
|
|
height: "44px",
|
||
|
|
padding: "10px 20px",
|
||
|
|
borderRadius: "8px",
|
||
|
|
background: theme.palette.brightPurple.main,
|
||
|
|
fontSize: "18px",
|
||
|
|
}}
|
||
|
|
onClick={onLargeBtnClick}
|
||
|
|
>
|
||
|
|
{largeBtnText ? largeBtnText : "Далее"}
|
||
|
|
</Button>
|
||
|
|
)}
|
||
|
|
</Box>
|
||
|
|
);
|
||
|
|
};
|