102 lines
3.5 KiB
TypeScript
102 lines
3.5 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
// import { marasiDriveMapCards } from "../data/aboutMarasiDrive";
|
|
// import CustomScrollBar from "./ui/ScrollBar";
|
|
// import { GoogleMapData } from "../data/googleMapData";
|
|
import GoogleMap from "./GoogleMap";
|
|
import Button from "./ui/Button";
|
|
import FullScreenIcon from "./icons/FullScreenIcon";
|
|
import useModalStore from "../stores/useModalStore";
|
|
import IGMapPoi from "../types/IGMapPoi";
|
|
|
|
function GoogleMapMobile({
|
|
markers,
|
|
mapCenter,
|
|
}: {
|
|
markers?: IGMapPoi[];
|
|
mapCenter: google.maps.LatLngLiteral;
|
|
}) {
|
|
// const containerRef = useRef<HTMLDivElement>(null);
|
|
const [mapActive, setMapActive] = useState(false);
|
|
const { modal, setModal } = useModalStore();
|
|
|
|
useEffect(() => {
|
|
if (mapActive) setModal(<MapModal />);
|
|
else setModal(null);
|
|
}, [mapActive]);
|
|
|
|
useEffect(() => {
|
|
setMapActive(!!modal);
|
|
}, [modal]);
|
|
|
|
const MapModal = () => {
|
|
return (
|
|
<div
|
|
className={`relative max-md:aspect-[360/640] md:max-2xl:aspect[1/1] max-2xl:mb-4 overflow-clip rounded-[4.444vw] h-[calc(100dvh-100px)]`}
|
|
>
|
|
<GoogleMap
|
|
mapCenter={mapCenter}
|
|
markers={markers}
|
|
mobileActive={true}
|
|
mobile={true}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div className="md:hidden relative flex flex-col">
|
|
{
|
|
<div
|
|
className={` relative max-md:aspect-[328/328] scroll-mt-10 md:max-2xl:aspect[1/1] transition-all max-2xl:mb-4 overflow-clip rounded-[4.444vw]`}
|
|
>
|
|
<GoogleMap
|
|
mapCenter={mapCenter}
|
|
markers={markers}
|
|
mobileActive={false}
|
|
mobile={true}
|
|
/>
|
|
<Button
|
|
className={`absolute size-[11.111vw] right-[1.111vw] bottom-[1.111vw] `}
|
|
onClick={() => setMapActive(true)}
|
|
>
|
|
<div className="size-[5.556vw] text-[#0D1922]">
|
|
<FullScreenIcon />
|
|
</div>
|
|
</Button>
|
|
</div>
|
|
}
|
|
{/*
|
|
<div
|
|
ref={containerRef}
|
|
className="flex flex-nowrap overflow-x-scroll scroll-pl-4 gap-x-[16px] overflow-y-hidden justify-start snap-x snap-mandatory [&::-webkit-scrollbar]:h-[1.111vw] [&::-webkit-scrollbar]:w-[none] [&::-webkit-scrollbar-thumb]:bg-[#FFFFFF] [&::-webkit-scrollbar-thumb]:w-4 [&::-webkit-scrollbar-thumb]:rounded-full -mx-4 px-4 "
|
|
>
|
|
{marasiDriveMapCards.map((card, index) => (
|
|
<div key={index} className="snap-start">
|
|
<div
|
|
className={`rounded-[6.667vw] px-[4.444vw] py-[3.333vw] w-[51.111vw] aspect-[184/122] bg-[#F3F3F2] flex-shrink-0 flex flex-col justify-between relative md:max-2xl:w-[25vw] md:max-2xl:rounded-[3.125vw] md:max-2xl:px-[2.083vw] md:max-2xl:py-[1.563vw]`}
|
|
>
|
|
<div className="space-y-[0.278vw]">
|
|
<p className="text-m">{card.title}</p>
|
|
<p className="text-s text-[#73787C]">{`${card.mins} mins`}</p>
|
|
</div>
|
|
<img
|
|
src={card.image}
|
|
className="rounded-[0.278vw] size-[13.333vw] object-cover absolute bottom-[4.444vw] right-[3.333vw] md:max-2xl:size-[6.25vw] md:max-2xl:bottom-[1.563vw] md:max-2xl:right-[2.083vw]"
|
|
alt={card.title}
|
|
/>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<CustomScrollBar
|
|
containerRef={containerRef}
|
|
inlinePadding={16}
|
|
trackStyle="min-2xl:hidden max-2xl:translate-y-5"
|
|
thumbStyle="min-2xl:hidden"
|
|
/> */}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default GoogleMapMobile;
|