feat: Add carriers translation on 3 languages

src/pages/Article/ArticlePreviewPage/PreviewLeftWidget.tsx

@@ -0,0 +1,85 @@
+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>
+  );
+});