feat: Add carriers translation on 3 languages

2025-06-13 11:17:18 +03:00
parent f49caf3ec8
commit 2117a6836e
34 changed files with 645 additions and 344 deletions
--- a/src/pages/Article/ArticlePreviewPage/PreviewRightWidget.tsx
+++ b/src/pages/Article/ArticlePreviewPage/PreviewRightWidget.tsx
@ -0,0 +1,139 @@
+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 />
+          </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>
+  );
+});