feat: Refactor old code with delete modal and icons for buttons

src/widgets/SightTabs/CreateLeftTab/index.tsx

@@ -16,8 +16,16 @@ import {
   ReactMarkdownComponent,
   ReactMarkdownEditor,
   MediaViewer,
+  DeleteModal,
 } from "@widgets";
-import { Trash2, ImagePlus } from "lucide-react";
+import {
+  Trash2,
+  ImagePlus,
+  Unlink,
+  MousePointer,
+  Plus,
+  Save,
+} from "lucide-react";
 import { useState, useCallback } from "react";
 import { observer } from "mobx-react-lite";
 import { toast } from "react-toastify";
@@ -47,7 +55,7 @@ export const CreateLeftTab = observer(
       useState(false);
     const [isSelectMediaDialogOpen, setIsSelectMediaDialogOpen] =
       useState(false);
-
+    const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
     // const handleMediaSelected = useCallback(() => {
     //   // При выборе медиа, обновляем данные для ТЕКУЩЕГО ЯЗЫКА
     //   // сохраняя текущие heading и body.
@@ -123,6 +131,7 @@ export const CreateLeftTab = observer(
                     color="primary"
                     size="small"
                     style={{ transition: "0" }}
+                    startIcon={<Unlink size={18} />}
                     onClick={() => {
                       unlinkLeftArticle();
                       toast.success("Статья откреплена");
@@ -136,10 +145,7 @@ export const CreateLeftTab = observer(
                     style={{ transition: "0" }}
                     startIcon={<Trash2 size={18} />}
                     size="small"
-                    onClick={() => {
-                      deleteLeftArticle(sight.left_article);
-                      toast.success("Статья откреплена");
-                    }}
+                    onClick={() => setIsDeleteModalOpen(true)}
                   >
                     Удалить
                   </Button>
@@ -150,6 +156,7 @@ export const CreateLeftTab = observer(
                     variant="contained"
                     color="primary"
                     size="small"
+                    startIcon={<MousePointer color="white" size={18} />}
                     onClick={() => setIsSelectArticleDialogOpen(true)}
                   >
                     Выбрать статью
@@ -158,6 +165,7 @@ export const CreateLeftTab = observer(
                     variant="contained"
                     color="primary"
                     size="small"
+                    startIcon={<Plus color="white" size={18} />}
                     style={{ transition: "0" }}
                     onClick={createLeftArticle}
                   >
@@ -301,6 +309,7 @@ export const CreateLeftTab = observer(
                     display: "flex",
                     flexDirection: "column",
                     gap: 1.5,
+                    maxWidth: "320px",
                   }}
                 >
                   <Paper
@@ -405,10 +414,11 @@ export const CreateLeftTab = observer(
                 <Button
                   variant="contained"
                   color="success"
+                  startIcon={<Save color="white" size={18} />}
                   onClick={async () => {
                     try {
                       await createSight(language);
-                      toast.success("Странца создана");
+                      toast.success("Страница создана");
                     } catch (error) {
                       console.error(error);
                     }
@@ -445,6 +455,14 @@ export const CreateLeftTab = observer(
           onClose={handleCloseArticleDialog}
           onSelectArticle={handleArticleSelect}
         />
+        <DeleteModal
+          open={isDeleteModalOpen}
+          onDelete={() => {
+            deleteLeftArticle(sight.left_article);
+            toast.success("Статья откреплена");
+          }}
+          onCancel={() => setIsDeleteModalOpen(false)}
+        />
       </TabPanel>
     );
   }