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

src/pages/CreateSightPage/index.tsx

@@ -1,6 +1,11 @@
-import { Box, Tab, Tabs } from "@mui/material";
+import { Box, Button, Tab, Tabs } from "@mui/material";
 import { articlesStore, cityStore, languageStore } from "@shared";
-import { CreateInformationTab, CreateLeftTab, CreateRightTab } from "@widgets";
+import {
+  CreateInformationTab,
+  CreateLeftTab,
+  CreateRightTab,
+  LeaveAgree,
+} from "@widgets";
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react-lite";
 
@@ -11,6 +16,8 @@ function a11yProps(index: number) {
   };
 }
 
+import { useBlocker } from "react-router";
+
 export const CreateSightPage = observer(() => {
   const [value, setValue] = useState(0);
   const { getCities } = cityStore;
@@ -19,6 +26,11 @@ export const CreateSightPage = observer(() => {
     setValue(newValue);
   };
 
+  let blocker = useBlocker(
+    ({ currentLocation, nextLocation }) =>
+      true && currentLocation.pathname !== nextLocation.pathname
+  );
+
   useEffect(() => {
     const fetchData = async () => {
       await getCities();
@@ -34,6 +46,7 @@ export const CreateSightPage = observer(() => {
         display: "flex",
         flexDirection: "column",
         minHeight: "100vh",
+        z: 10,
       }}
     >
       <Box
@@ -66,6 +79,8 @@ export const CreateSightPage = observer(() => {
         <CreateLeftTab value={value} index={1} />
         <CreateRightTab value={value} index={2} />
       </div>
+
+      {blocker.state === "blocked" ? <LeaveAgree blocker={blocker} /> : null}
     </Box>
   );
 });