init: Init React Application

src/widgets/SightTabs/InformationTab/index.tsx

@@ -0,0 +1,48 @@
+import { TextField } from "@mui/material";
+import { BackButton, TabPanel } from "@shared";
+import { LanguageSwitcher } from "@widgets";
+
+export const InformationTab = ({
+  value,
+  index,
+}: {
+  value: number;
+  index: number;
+}) => {
+  return (
+    <TabPanel value={value} index={index}>
+      <div className="flex-1 flex flex-col relative">
+        <div className="flex-1 flex flex-col gap-10">
+          <BackButton />
+          <div className="flex flex-col gap-5 w-1/2">
+            <TextField label="Название" />
+            <TextField label="Адрес" />
+            <TextField label="Город" />
+            <TextField label="Координаты" />
+
+            <div className="flex justify-around w-full mt-20">
+              <div className="flex flex-col gap-2 ">
+                <p>Логотип</p>
+                <button>Выбрать</button>
+              </div>
+              <div className="flex flex-col gap-2">
+                <p>Водяной знак (л.в)</p>
+                <button>Выбрать</button>
+              </div>
+              <div className="flex flex-col gap-2">
+                <p>Водяной знак (п.в)</p>
+                <button>Выбрать</button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <button className="bg-green-400 w-min ml-auto text-white py-2 rounded-2xl px-4">
+          Сохранить
+        </button>
+        <div className="absolute top-1/2 -translate-y-1/2 right-0">
+          <LanguageSwitcher />
+        </div>
+      </div>
+    </TabPanel>
+  );
+};

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>
+  );
+};

src/widgets/SightTabs/RightWidgetTab/index.tsx

@@ -0,0 +1,73 @@
+import { BackButton, TabPanel } from "@shared";
+import { SightEdit } from "@widgets";
+import { Plus } from "lucide-react";
+
+export const RightWidgetTab = ({
+  value,
+  index,
+}: {
+  value: number;
+  index: number;
+}) => {
+  return (
+    <TabPanel value={value} index={index}>
+      {/* Ensure the main container takes full height and uses flexbox for layout */}
+      <div className="flex flex-col h-full min-h-[600px]">
+        {/* Content area with back button and main layout */}
+        <div className="flex-1 flex flex-col gap-6 p-4">
+          {" "}
+          {/* Added padding for better spacing */}
+          <BackButton />
+          <div className="flex flex-1 gap-6">
+            {" "}
+            {/* flex-1 allows this div to take remaining height */}
+            {/* Left sidebar */}
+            <div className="flex flex-col justify-between w-[240px] shrink-0 bg-gray-500 rounded-lg p-3">
+              {" "}
+              {/* Added background and padding */}
+              <div className="flex flex-col gap-3">
+                <div className="border rounded-lg p-3 bg-white font-medium shadow-sm">
+                  {" "}
+                  {/* Adjusted background and added shadow */}
+                  Превью медиа
+                </div>
+                <div className="border rounded-lg p-3 bg-white hover:bg-gray-100 transition-colors cursor-pointer shadow-sm">
+                  {" "}
+                  {/* Adjusted background and added shadow */}1 История
+                </div>
+                <div className="border rounded-lg p-3 bg-white hover:bg-gray-100 transition-colors cursor-pointer shadow-sm">
+                  {" "}
+                  {/* Adjusted background and added shadow */}2 Факты
+                </div>
+              </div>
+              <button className="w-10 h-10 rounded-full bg-blue-500 hover:bg-blue-600 text-white p-3transition-colors flex items-center justify-center">
+                {" "}
+                {/* Added margin-top */}
+                <Plus />
+              </button>
+            </div>
+            {/* Main content area */}
+            <div className="flex-1 border rounded-lg p-6 bg-white shadow-md">
+              {" "}
+              {/* Added shadow for depth */}
+              {/* Content within the main area */}
+              <SightEdit />
+              {/* Replaced '1' with more descriptive content */}
+            </div>
+          </div>
+        </div>
+
+        {/* Save button at the bottom, aligned to the right */}
+        <div className="flex justify-end p-4">
+          {" "}
+          {/* Wrapper for save button, added padding */}
+          <button className="bg-green-500 hover:bg-green-600 text-white py-2.5 px-6 rounded-lg transition-colors font-medium shadow-md">
+            {" "}
+            {/* Added shadow */}
+            Сохранить
+          </button>
+        </div>
+      </div>
+    </TabPanel>
+  );
+};

src/widgets/SightTabs/index.ts

@@ -0,0 +1,3 @@
+export * from "./InformationTab";
+export * from "./LeftWidgetTab";
+export * from "./RightWidgetTab";