53 lines
1.9 KiB
JavaScript
53 lines
1.9 KiB
JavaScript
"use client";
|
|
|
|
import ExploreIcon from "@mui/icons-material/Explore";
|
|
import { Box, Button, Dialog, DialogActions, DialogContent, IconButton } from "@mui/material";
|
|
import { useState } from "react";
|
|
import dynamic from "next/dynamic";
|
|
import MapLoading from "@/core/components/MapLayer/Loading";
|
|
import ShowLocationMarker from "@/core/components/ShowLocationMarker";
|
|
|
|
const MapLayer = dynamic(() => import("@/core/components/MapLayer"), {
|
|
loading: () => <MapLoading />,
|
|
ssr: false,
|
|
});
|
|
|
|
const ShowLocation = ({ lat, lng }) => {
|
|
const [openShowLocationModal, setOpenShowLocationModal] = useState(false);
|
|
|
|
const handleOpenShowLocationModal = () => {
|
|
setOpenShowLocationModal(true);
|
|
};
|
|
|
|
const handleCloseShowLocationModal = () => {
|
|
setOpenShowLocationModal(false);
|
|
};
|
|
|
|
return (
|
|
<Box sx={{ display: "flex", justifyContent: "center" }}>
|
|
<IconButton onClick={handleOpenShowLocationModal} size="small" color="primary">
|
|
<ExploreIcon />
|
|
</IconButton>
|
|
<Dialog
|
|
open={openShowLocationModal}
|
|
onClose={handleCloseShowLocationModal}
|
|
aria-labelledby="responsive-dialog-title"
|
|
>
|
|
<DialogContent>
|
|
<Box sx={{ width: "400px", height: "400px" }}>
|
|
<MapLayer>
|
|
<ShowLocationMarker start_lat={lat} start_lng={lng} />
|
|
</MapLayer>
|
|
</Box>
|
|
</DialogContent>
|
|
<DialogActions>
|
|
<Button color="error" variant="outlined" onClick={handleCloseShowLocationModal}>
|
|
بستن
|
|
</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
</Box>
|
|
);
|
|
};
|
|
export default ShowLocation;
|