87 lines
2.1 KiB
TypeScript
87 lines
2.1 KiB
TypeScript
import { Box, Button, Skeleton, useTheme, useMediaQuery } from "@mui/material";
|
|
import Plus from "@icons/questionsPage/plus";
|
|
import Image from "../assets/icons/questionsPage/image";
|
|
|
|
import type { SxProps, Theme } from "@mui/material";
|
|
|
|
interface Props {
|
|
sx?: SxProps<Theme>;
|
|
imageSrc?: string | null;
|
|
onImageClick?: () => void;
|
|
onPlusClick?: () => void;
|
|
uploading: boolean;
|
|
}
|
|
|
|
export default function AddOrEditImageButton({ onImageClick, onPlusClick, sx, imageSrc, uploading = false }: Props) {
|
|
const theme = useTheme();
|
|
const isMobile = useMediaQuery(theme.breakpoints.down(790));
|
|
|
|
return (
|
|
<>
|
|
{uploading ? (
|
|
<Skeleton
|
|
variant="rounded"
|
|
sx={{
|
|
height: "40px",
|
|
width: isMobile ? "auto" : "80px",
|
|
margin: isMobile ? "8px" : "0 10px 0 8px",
|
|
}}
|
|
/>
|
|
) : (
|
|
<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>
|
|
)}
|
|
</>
|
|
);
|
|
}
|