91 lines
3.0 KiB
TypeScript
91 lines
3.0 KiB
TypeScript
import { motion } from "motion/react";
|
|
import HumanIcon from "./icons/HumanIcon";
|
|
import Button from "./ui/Button";
|
|
import ArrowRightIcon from "./icons/ArrowRightIcon";
|
|
import CloseIcon from "./icons/CloseIcon";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { api } from "../api/ky";
|
|
import IMarker from "../types/IMarker";
|
|
import { formattedUnitTypes } from "../data/formattedUnitTypes";
|
|
import { useNavigate } from "react-router";
|
|
|
|
function NewSelectedComplexCard({
|
|
marker,
|
|
onClose,
|
|
}: {
|
|
marker: IMarker;
|
|
onClose: () => void;
|
|
}) {
|
|
const { data: unitTypes } = useQuery({
|
|
queryKey: ["filters", "unitTypes", marker.title],
|
|
queryFn: () =>
|
|
api
|
|
.get(`units/filters/unitTypes?project=Rove Home ${marker.title}`)
|
|
.json<string[]>(),
|
|
});
|
|
|
|
const navigate = useNavigate();
|
|
|
|
return (
|
|
<motion.div
|
|
key={marker.name}
|
|
initial={{ opacity: 0, y: "100%" }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0, y: "100%" }}
|
|
transition={{ duration: 0.3 }}
|
|
className="absolute w-full p-4 pb-6 bottom-0 bg-white rounded-t-2xl z-1"
|
|
>
|
|
<div className="space-y-4">
|
|
<div className="left-1/2 -translate-x-1/2 top-2 absolute bg-[#E2E2DC] w-[6.667vw] aspect-[6/1] rounded-2xl" />
|
|
<Button
|
|
onlyIcon
|
|
className="!bg-[#F3F3F2] absolute top-4 right-4"
|
|
onClick={onClose}
|
|
>
|
|
<span className="w-5 h-5 text-[#0D1922]">
|
|
<CloseIcon />
|
|
</span>
|
|
</Button>
|
|
<div className="space-y-2">
|
|
<p className="text-h5 font-medium">{marker.title}</p>
|
|
<div className="flex gap-1">
|
|
<div className="px-2 py-0.5 bg-[#F3F3F2] rounded">
|
|
<p className="text-caption-s opacity-70"># Apartments</p>
|
|
</div>
|
|
<div className="rounded px-2 py-0.5 flex items-center justify-center gap-1 bg-[#30B216]/8">
|
|
<span className="text-[#30B216] w-[3.333vw] h-[3.333vw]">
|
|
<HumanIcon />
|
|
</span>
|
|
<p className="text-caption-s text-[#30B216]">Virtual Tour</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr className="border-[#E2E2DC] h-px" />
|
|
<div className="space-y-2">
|
|
{unitTypes?.map((unitType) => (
|
|
<div key={unitType} className="flex items-center gap-2">
|
|
<div className="rounded-full flex justify-center items-center w-[4.444vw] h-[4.444vw] bg-[#00BED7] text-white text-caption-s">
|
|
4
|
|
</div>
|
|
<p className="opacity-70 text-caption-m">
|
|
{formattedUnitTypes.get(unitType)}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<Button
|
|
className="w-full"
|
|
onTouchStart={() => navigate(`/complex/${marker.name}`)}
|
|
>
|
|
<p className="text-btn-m">Explore</p>
|
|
<span className="w-5 h-5">
|
|
<ArrowRightIcon />
|
|
</span>
|
|
</Button>
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
}
|
|
|
|
export default NewSelectedComplexCard;
|