86 lines
2.4 KiB
TypeScript
86 lines
2.4 KiB
TypeScript
import { Paper, Box, Typography } from "@mui/material";
|
|
import { MediaViewer, ReactMarkdownComponent } from "@widgets";
|
|
import { articlesStore, languageStore } from "@shared";
|
|
import { observer } from "mobx-react-lite";
|
|
|
|
export const PreviewLeftWidget = observer(() => {
|
|
const { articleMedia, articleData } = articlesStore;
|
|
const { language } = languageStore;
|
|
|
|
return (
|
|
<Paper
|
|
elevation={3}
|
|
sx={{
|
|
width: "100%",
|
|
minWidth: 320,
|
|
background:
|
|
"#806c59 linear-gradient(90deg, rgba(255, 255, 255, 0.2) 12.5%, rgba(255, 255, 255, 0.2) 100%)",
|
|
overflowY: "auto",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
borderRadius: "10px",
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
overflow: "hidden",
|
|
width: "100%",
|
|
minHeight: 100,
|
|
padding: "3px",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
"& img": {
|
|
borderTopLeftRadius: "10px",
|
|
borderTopRightRadius: "10px",
|
|
width: "100%",
|
|
height: "auto",
|
|
objectFit: "contain",
|
|
},
|
|
}}
|
|
>
|
|
{articleMedia && <MediaViewer media={articleMedia} fullWidth />}
|
|
</Box>
|
|
<Box
|
|
sx={{
|
|
background:
|
|
"#806c59 linear-gradient(90deg, rgba(255, 255, 255, 0.2) 12.5%, rgba(255, 255, 255, 0.2) 100%)",
|
|
color: "white",
|
|
margin: "5px 0px 5px 0px",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
gap: 1,
|
|
padding: 1,
|
|
}}
|
|
>
|
|
<Typography
|
|
variant="h5"
|
|
component="h2"
|
|
sx={{
|
|
wordBreak: "break-word",
|
|
fontSize: "24px",
|
|
fontWeight: 700,
|
|
lineHeight: "120%",
|
|
}}
|
|
>
|
|
{articleData?.[language]?.heading || "Название информации"}
|
|
</Typography>
|
|
</Box>
|
|
{articleData?.[language]?.body && (
|
|
<Box
|
|
sx={{
|
|
padding: 1,
|
|
maxHeight: "300px",
|
|
overflowY: "scroll",
|
|
background:
|
|
"#806c59 linear-gradient(90deg, rgba(255, 255, 255, 0.2) 12.5%, rgba(255, 255, 255, 0.2) 100%)",
|
|
flexGrow: 1,
|
|
}}
|
|
>
|
|
<ReactMarkdownComponent value={articleData?.[language]?.body} />
|
|
</Box>
|
|
)}
|
|
</Paper>
|
|
);
|
|
});
|