74 lines
2.3 KiB
TypeScript
74 lines
2.3 KiB
TypeScript
import { useNavigate } from "react-router";
|
||
import ArrowRightIcon from "./icons/map/ArrowRightIcon";
|
||
import Button from "./ui/Button";
|
||
import { motion } from "motion/react";
|
||
import IMarker from "../types/IMarker";
|
||
import { useEffect, useState } from "react";
|
||
import clsx from "clsx";
|
||
|
||
export default function SelectedComplexCard({ marker }: { marker: IMarker }) {
|
||
const navigate = useNavigate();
|
||
const [isImageLoaded, setIsImageLoaded] = useState(false);
|
||
|
||
useEffect(() => {
|
||
setIsImageLoaded(false);
|
||
}, [marker]);
|
||
|
||
return (
|
||
<motion.div
|
||
id={`selected-complex-card`}
|
||
key={marker.id}
|
||
initial={{ opacity: 0, bottom: -16 }}
|
||
animate={{ opacity: 1, bottom: 0 }}
|
||
exit={{ opacity: 0, bottom: -16 }}
|
||
transition={{ duration: 0.3 }}
|
||
>
|
||
<div className="rounded-2xl flex gap-3 p-4 bg-white absolute bottom-3 left-3 w-[calc(100%-24px)]">
|
||
<div className="relative w-26 h-26">
|
||
<img
|
||
src={`/images/map/markers/cards/${marker.name}.jpg`}
|
||
alt={marker.title}
|
||
className={clsx(
|
||
"rounded transition-opacity duration-300 pointer-events-none",
|
||
isImageLoaded ? "opacity-100" : "opacity-0"
|
||
)}
|
||
onLoad={() => setIsImageLoaded(true)}
|
||
/>
|
||
<div
|
||
className={clsx(
|
||
"absolute inset-0 flex items-center justify-center tran",
|
||
isImageLoaded ? "opacity-0" : "opacity-100"
|
||
)}
|
||
>
|
||
<p className="text-xs">Loading...</p>
|
||
</div>
|
||
</div>
|
||
<div className="flex flex-col justify-between border-b border-[#E2E2DC] flex-1">
|
||
<div className="flex justify-between gap-4">
|
||
<p className="font-semibold leading-[115%]">
|
||
Rove Home
|
||
<br />
|
||
{marker.title}
|
||
</p>
|
||
<p className="text-[#00BED7] text-[10px] leading-[135%]">
|
||
{marker.unitsCount} units
|
||
</p>
|
||
</div>
|
||
<Button
|
||
disabled
|
||
variant="tertiary"
|
||
size="small"
|
||
className="w-fit"
|
||
onTouchStart={() => navigate(`/complex/${marker.name}`)}
|
||
>
|
||
Explore
|
||
<span className="w-4 h-4">
|
||
<ArrowRightIcon />
|
||
</span>
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
);
|
||
}
|