init: Init React Application

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