Feature/add current location map

src/core/components/MapInfoOneMarker.jsx

@@ -1,11 +1,13 @@
-import React, { useEffect, useRef, useState } from "react";
-import { Marker, useMapEvents } from "react-leaflet";
-import "leaflet/dist/leaflet.css";
-import L from "leaflet";
-import { Alert, Box, Button, Stack, Typography, Zoom } from "@mui/material";
-import dynamic from "next/dynamic";
-import MapLoading from "@/core/components/MapLayer/Loading";
 import HereIcon from "@/assets/images/examine_marker_active.png";
+import MapLoading from "@/core/components/MapLayer/Loading";
+import { MyLocation } from "@mui/icons-material";
+import { Alert, Box, Button, Stack, Typography, Zoom } from "@mui/material";
+import L from "leaflet";
+import "leaflet/dist/leaflet.css";
+import dynamic from "next/dynamic";
+import { useEffect, useRef, useState } from "react";
+import { Marker, useMapEvents } from "react-leaflet";
+import FlyToUserLocation from "./FlyToLocation";
 
 const MapLayer = dynamic(() => import("@/core/components/MapLayer"), {
     loading: () => <MapLoading />,
@@ -113,20 +115,36 @@ const MapInteraction = ({ setValue, startLat, startLng, title }) => {
                     </Alert>
                 </Zoom>
             </Stack>
-            {isMarkerLocked && (
-                <Box
-                    sx={{
-                        position: "absolute",
-                        bottom: 10,
-                        left: 10,
-                        zIndex: 1000,
-                    }}
-                >
-                    <Button variant="contained" color="warning" onClick={handleUnlockMarker}>
+            <Stack
+                direction={"row"}
+                justifyContent={"space-between"}
+                sx={{
+                    zIndex: "1000",
+                    width: "100%",
+                    position: "absolute",
+                    bottom: 0,
+                    left: 0,
+                }}
+            >
+                <Zoom in={isMarkerLocked}>
+                    <Button variant="contained" size="small" color="warning" sx={{ m: 1 }} onClick={handleUnlockMarker}>
                         تغییر مکان
                     </Button>
-                </Box>
-            )}
+                </Zoom>
+                <FlyToUserLocation
+                    Component={(props) => (
+                        <Button
+                            sx={{ m: 1 }}
+                            variant="contained"
+                            size="small"
+                            startIcon={<MyLocation />}
+                            onClick={props.handleLocateUser}
+                        >
+                            موقعیت من
+                        </Button>
+                    )}
+                />
+            </Stack>
         </>
     );
 };