50 lines
2.1 KiB
TypeScript
50 lines
2.1 KiB
TypeScript
import { useRef } from "react";
|
|
import { marasiDriveMapCards } from "../data/aboutMarasiDrive";
|
|
import CustomScrollBar from "./ui/ScrollBar";
|
|
|
|
function MarasiDriveMapMobile() {
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
|
|
return (
|
|
<div className="hidden relative max-2xl:flex flex-col">
|
|
<div className="max-md:aspect-[328/544] md:max-2xl:aspect[1/1] max-2xl:mb-4">
|
|
<img
|
|
src="/images/about-complex/marasi-drive/map/map.png"
|
|
alt=""
|
|
className="object-cover size-full rounded-[6.667vw] md:max-2xl:rounded-[3.125vw]"
|
|
/>
|
|
</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="2xl:hidden max-2xl:translate-y-5"
|
|
thumbStyle="2xl:hidden"
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default MarasiDriveMapMobile;
|