140 lines
4.1 KiB
TypeScript
140 lines
4.1 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";
|
||
import { ImagePlus } from "lucide-react";
|
||
|
||
export const PreviewRightWidget = observer(() => {
|
||
const { articleData, articleMedia } = articlesStore;
|
||
const { language } = languageStore;
|
||
const article = articleData?.[language];
|
||
if (!article) return null;
|
||
|
||
return (
|
||
<Paper
|
||
className="flex-1 flex flex-col max-w-[500px]"
|
||
sx={{
|
||
borderRadius: "10px",
|
||
overflow: "hidden",
|
||
}}
|
||
elevation={2}
|
||
>
|
||
<Box
|
||
className="overflow-hidden"
|
||
sx={{
|
||
width: "100%",
|
||
background: "#877361",
|
||
borderColor: "grey.300",
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
}}
|
||
>
|
||
{articleMedia ? (
|
||
<Box
|
||
sx={{
|
||
overflow: "hidden",
|
||
width: "100%",
|
||
padding: "2px 2px 0px 2px",
|
||
"& img": {
|
||
borderTopLeftRadius: "10px",
|
||
borderTopRightRadius: "10px",
|
||
width: "100%",
|
||
height: "auto",
|
||
objectFit: "contain",
|
||
},
|
||
}}
|
||
>
|
||
<MediaViewer media={articleMedia} fullWidth fullHeight />
|
||
</Box>
|
||
) : (
|
||
<Box
|
||
sx={{
|
||
width: "100%",
|
||
height: 200,
|
||
flexShrink: 0,
|
||
backgroundColor: "rgba(0,0,0,0.1)",
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "center",
|
||
}}
|
||
>
|
||
<ImagePlus size={48} color="white" />
|
||
</Box>
|
||
)}
|
||
|
||
<Box
|
||
sx={{
|
||
p: 1,
|
||
wordBreak: "break-word",
|
||
fontSize: "24px",
|
||
fontWeight: 700,
|
||
lineHeight: "120%",
|
||
backdropFilter: "blur(12px)",
|
||
borderBottom: "1px solid #A89F90",
|
||
boxShadow: "inset 4px 4px 12px 0 rgba(255,255,255,0.12)",
|
||
background:
|
||
"#806c59 linear-gradient(90deg, rgba(255, 255, 255, 0.2) 12.5%, rgba(255, 255, 255, 0.2) 100%)",
|
||
}}
|
||
>
|
||
<Typography variant="h6" color="white">
|
||
{article.heading || "Выберите статью"}
|
||
</Typography>
|
||
</Box>
|
||
|
||
<Box
|
||
sx={{
|
||
padding: 1,
|
||
minHeight: "200px",
|
||
maxHeight: "300px",
|
||
overflowY: "scroll",
|
||
background:
|
||
"rgba(179, 165, 152, 0.4), linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 100%)",
|
||
flexGrow: 1,
|
||
}}
|
||
>
|
||
{article.body ? (
|
||
<ReactMarkdownComponent value={article.body} />
|
||
) : (
|
||
<Typography
|
||
color="rgba(255,255,255,0.7)"
|
||
sx={{ textAlign: "center", mt: 4 }}
|
||
>
|
||
Предпросмотр статьи появится здесь
|
||
</Typography>
|
||
)}
|
||
</Box>
|
||
|
||
{/* @ts-ignore */}
|
||
{articleData?.right && articleData?.right.length > 1 && (
|
||
<Box
|
||
sx={{
|
||
p: 2,
|
||
display: "flex",
|
||
justifyContent: "space-between",
|
||
fontSize: "24px",
|
||
fontWeight: 700,
|
||
lineHeight: "120%",
|
||
flexWrap: "wrap",
|
||
gap: 1,
|
||
backdropFilter: "blur(12px)",
|
||
boxShadow: "inset 4px 4px 12px 0 rgba(255,255,255,0.12)",
|
||
background:
|
||
"#806c59 linear-gradient(90deg, rgba(255, 255, 255, 0.2) 12.5%, rgba(255, 255, 255, 0.2) 100%)",
|
||
}}
|
||
>
|
||
{/* @ts-ignore */}
|
||
{articleData.right.map((a, idx) => (
|
||
<button
|
||
key={idx}
|
||
className="inline-block text-left text-xs text-white"
|
||
>
|
||
{a.heading}
|
||
</button>
|
||
))}
|
||
</Box>
|
||
)}
|
||
</Box>
|
||
</Paper>
|
||
);
|
||
});
|