46 lines
1.4 KiB
JavaScript
46 lines
1.4 KiB
JavaScript
import { Box, Stack, Typography, useTheme } from "@mui/material";
|
|
import Image from "next/image";
|
|
|
|
const ImageFormContent = ({ image, title }) => {
|
|
const theme = useTheme();
|
|
return (
|
|
<Stack
|
|
spacing={2}
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
sx={{
|
|
my: 2,
|
|
padding: 2,
|
|
borderRadius: "12px",
|
|
border: `1px solid ${theme.palette.primary.main}`,
|
|
}}
|
|
>
|
|
<Typography
|
|
variant="h6"
|
|
sx={{
|
|
color: theme.palette.primary.dark,
|
|
fontWeight: "bold",
|
|
}}
|
|
>
|
|
{title}
|
|
</Typography>
|
|
<Box sx={{ width: "100%", position: "relative", aspectRatio: "16/9" }}>
|
|
<Image
|
|
src={image}
|
|
alt="Image"
|
|
fill={true}
|
|
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
|
|
loading="lazy"
|
|
style={{
|
|
objectFit: "contain",
|
|
marginBottom: "16px",
|
|
borderRadius: "12px",
|
|
border: `1px solid ${theme.palette.divider}`,
|
|
}}
|
|
/>
|
|
</Box>
|
|
</Stack>
|
|
);
|
|
};
|
|
export default ImageFormContent;
|