65 lines
1.8 KiB
TypeScript
65 lines
1.8 KiB
TypeScript
import Plus from "@icons/questionsPage/plus";
|
|
import { Box, Button, SxProps, Theme } from "@mui/material";
|
|
import Image from "../assets/icons/questionsPage/image";
|
|
|
|
|
|
interface Props {
|
|
sx?: SxProps<Theme>;
|
|
imageSrc?: string;
|
|
onImageClick?: () => void;
|
|
onPlusClick?: () => void;
|
|
}
|
|
|
|
export default function AddOrEditImageButton({ onImageClick, onPlusClick, sx, imageSrc }: Props) {
|
|
|
|
return (
|
|
<Box sx={{
|
|
display: "flex",
|
|
height: "40px",
|
|
minWidth: "60px",
|
|
width: "60px",
|
|
borderRadius: "3px",
|
|
overflow: "hidden",
|
|
...sx,
|
|
}}>
|
|
<Button
|
|
onClick={onImageClick}
|
|
sx={{
|
|
p: 0,
|
|
minWidth: "40px",
|
|
flexGrow: 1,
|
|
backgroundColor: "#EEE4FC",
|
|
}}>
|
|
{imageSrc ? (
|
|
<img
|
|
src={imageSrc}
|
|
alt=""
|
|
style={{
|
|
width: "100%",
|
|
height: "100%",
|
|
objectFit: "scale-down",
|
|
display: "block",
|
|
}}
|
|
/>
|
|
) : (
|
|
<Image sx={{
|
|
height: "100%",
|
|
width: "100%",
|
|
}} />
|
|
)}
|
|
</Button>
|
|
<Button
|
|
onClick={onPlusClick}
|
|
data-cy="add-image-button"
|
|
sx={{
|
|
p: 0,
|
|
minWidth: "20px",
|
|
width: "20px",
|
|
}}
|
|
>
|
|
<Plus />
|
|
</Button>
|
|
</Box>
|
|
);
|
|
}
|