init: Init React Application

src/widgets/SightTabs/LeftWidgetTab/index.tsx

@@ -0,0 +1,60 @@
+import { TextField } from "@mui/material";
+import { BackButton, TabPanel } from "@shared";
+import { ReactMarkdownComponent, ReactMarkdownEditor } from "@widgets";
+import { Trash2 } from "lucide-react";
+import { Unlink } from "lucide-react";
+import { useState } from "react";
+
+export const LeftWidgetTab = ({
+  value,
+  index,
+}: {
+  value: number;
+  index: number;
+}) => {
+  const [leftArticleData, setLeftArticleData] = useState("  ");
+  return (
+    <TabPanel value={value} index={index}>
+      <div className="flex flex-col gap-5">
+        <BackButton />
+
+        <div className="flex items-center justify-between px-5 h-14 rounded-md border">
+          <p className="text-2xl">Левая статья</p>
+          <div className="flex items-center gap-5">
+            <button className="flex items-center gap-2 border border-gray-300 bg-blue-100 rounded-md px-2 py-1">
+              Открепить
+              <Unlink />
+            </button>
+            <button className="flex items-center gap-2 border border-gray-300 bg-red-100 rounded-md px-2 py-1">
+              Удалить
+              <Trash2 />
+            </button>
+          </div>
+        </div>
+        <div className="flex gap-5">
+          <div className="flex flex-col gap-5 flex-1">
+            <TextField sx={{ width: "30%" }} label="Название" />
+
+            <ReactMarkdownEditor
+              value={leftArticleData}
+              onChange={setLeftArticleData}
+            />
+          </div>
+          <div className="flex flex-col gap-2">
+            <p>Предпросмотр</p>
+            <div className="bg-yellow-200 w-[350px] h-full">
+              <div className="bg-red-100 w-full h-[200px]"></div>
+              <div className="bg-blue-100 w-full text-lg p-3"></div>
+              <div className="bg-green-100 p-3 prose max-w-none">
+                <ReactMarkdownComponent value={leftArticleData} />
+              </div>
+            </div>
+          </div>
+        </div>
+        <button className="bg-green-400 w-min ml-auto text-white py-2 rounded-2xl px-4">
+          Сохранить
+        </button>
+      </div>
+    </TabPanel>
+  );
+};