65 lines
2.5 KiB
JavaScript
65 lines
2.5 KiB
JavaScript
import { useState } from "react";
|
|
|
|
import RoutingWhiteC from "@/components/icons/RoutingWhiteC";
|
|
import { Button } from "@mui/material";
|
|
import ModalOpenLocation from "./modal";
|
|
import Detail from "./Detail";
|
|
import RoutingC from "@/components/icons/RoutingC";
|
|
|
|
function Contact({ data }) {
|
|
|
|
const [open, setOpen] = useState(false);
|
|
const handleOpen = () => setOpen(true);
|
|
const handleClose = () => setOpen(false);
|
|
|
|
return (
|
|
<div
|
|
className="
|
|
opacity-page border border-[#EFEFEF] rounded-[16px]
|
|
py-[12px] sm:py-[18px] md:py-[25px] lg:py-[32px]
|
|
px-[12px] sm:px-[30px] md:px-[47px] lg:px-[64px]
|
|
"
|
|
>
|
|
<div className="flex items-end justify-between">
|
|
<Detail data={data} />
|
|
<ModalOpenLocation
|
|
open={open}
|
|
setOpen={setOpen}
|
|
handleClose={handleClose}
|
|
>
|
|
<Button
|
|
className="!hidden md:!flex !gap-[8px] !py-[8px] !px-[12px]"
|
|
onClick={handleOpen}
|
|
variant="outlined"
|
|
>
|
|
<RoutingC />
|
|
مسیریابی
|
|
</Button>
|
|
</ModalOpenLocation>
|
|
</div>
|
|
<div
|
|
className="w-full relative h-[460px] mt-[24px]"
|
|
>
|
|
<iframe
|
|
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d83998.96777841153!2d2.264635095144491!3d48.85882549249809!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66e1f06e2b70f%3A0x40b82c3688c9460!2sParis%2C%20France!5e0!3m2!1sen!2snl!4v1723498499341!5m2!1sen!2snl"
|
|
className='w-full h-full rounded-lg'
|
|
loading="lazy"
|
|
></iframe>
|
|
<ModalOpenLocation
|
|
open={open}
|
|
setOpen={setOpen}
|
|
handleClose={handleClose}
|
|
>
|
|
<Button
|
|
className="!flex md:!hidden !p-2 !absolute !left-3 !bottom-3 !rounded-full !border !border-[#5559CE] !bg-[#5559CE] !shadow-[0px_1px_24.8px_0px_rgba(69,_69,_69,_0.54)]"
|
|
onClick={handleOpen}
|
|
>
|
|
<RoutingWhiteC />
|
|
</Button>
|
|
</ModalOpenLocation>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Contact |