95 lines
3.5 KiB
TypeScript
95 lines
3.5 KiB
TypeScript
/* eslint-disable react-hooks/exhaustive-deps */
|
|
import { useFavoritesUnitsStore } from "../stores/useFavoritesUnitsStore";
|
|
import { Unit } from "../types/IUnit";
|
|
import FilledHeartIcon from "./icons/FilledHeartIcon";
|
|
import HeartIcon from "./icons/HeartIcon";
|
|
import Button from "./ui/Button";
|
|
import "react-loading-skeleton/dist/skeleton.css";
|
|
import Skeleton from "react-loading-skeleton";
|
|
import { formattedUnitTypes } from "../data/formattedUnitTypes";
|
|
import { Link } from "react-router";
|
|
|
|
function UnitCard({ unit }: { unit: Unit }) {
|
|
const { favoriteUnits, setFavoriteUnits } = useFavoritesUnitsStore();
|
|
|
|
function handleFavorite(e: React.MouseEvent<HTMLButtonElement>) {
|
|
e.preventDefault();
|
|
if (favoriteUnits.some((favoriteUnit) => favoriteUnit.id === unit.id)) {
|
|
setFavoriteUnits(
|
|
favoriteUnits.filter((favoriteUnit) => favoriteUnit.id !== unit.id)
|
|
);
|
|
} else {
|
|
setFavoriteUnits([...favoriteUnits, unit]);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Link
|
|
target="_blank"
|
|
to={`/complex/${unit.projectSlug}/${unit.unitNo}`}
|
|
className="2xl:p-[1.111vw] p-4 2xl:rounded-[1.111vw] rounded-2xl 2xl:space-y-[1.111vw] space-y-4 bg-white hover:-translate-y-2 transition-[transform,box-shadow] duration-300 hover:[box-shadow:0_4px_16px_0_rgba(0,0,0,.1)]"
|
|
>
|
|
<div className="flex justify-between items-center">
|
|
<div className="2xl:space-y-[0.278vw] space-y-1">
|
|
<p className="text-s text-[#00BED7]">
|
|
{unit.project || <Skeleton />}
|
|
</p>
|
|
<div className="flex items-center 2xl:gap-[0.556vw] gap-2">
|
|
{unit.wing && (
|
|
<>
|
|
<p className="text-caption-m">
|
|
<span>{unit.wing} Wing</span>
|
|
</p>
|
|
<div className="2xl:w-[0.278vw] w-1 aspect-square bg-[#E2E2DC] rounded-full" />
|
|
</>
|
|
)}
|
|
|
|
<p className="text-caption-m">Floor {unit.floor}</p>
|
|
<div className="2xl:w-[0.278vw] w-1 aspect-square bg-[#E2E2DC] rounded-full" />
|
|
<p className="text-caption-m">{unit.unitNo}</p>
|
|
</div>
|
|
</div>
|
|
<Button onlyIcon variant="secondary" onClick={handleFavorite}>
|
|
<span className="2xl:w-[1.389vw] w-5 aspect-square text-[#0D1922]/70">
|
|
{favoriteUnits.some(
|
|
(favoriteUnit) => favoriteUnit.id === unit.id
|
|
) ? (
|
|
<FilledHeartIcon />
|
|
) : (
|
|
<HeartIcon />
|
|
)}
|
|
</span>
|
|
</Button>
|
|
</div>
|
|
<div className="2xl:rounded-[0.556vw] rounded-xl 2xl:p-[0.556vw] p-2 overflow-hidden mx-auto">
|
|
<img
|
|
src={`/images/unit-types/${unit.projectSlug}/${
|
|
unit.unitTypeVariantSlug
|
|
}${unit.isLoft ? "-lower" : ""}${
|
|
unit.side ? `-${unit.side}` : ""
|
|
}.jpg`}
|
|
alt=""
|
|
className="object-cover pointer-events-none 2xl:max-h-[19.861vw]"
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col 2xl:gap-y-[0.278vw] gap-y-1">
|
|
<p className="text-s">
|
|
{`${
|
|
formattedUnitTypes.get(unit.unitType) || unit.unitType
|
|
}, ${unit.squareFt.toLocaleString(undefined, {
|
|
maximumFractionDigits: 2,
|
|
})} Sqft`}
|
|
</p>
|
|
{/* <p className="text-[#00BED7] text-h4 font-medium">
|
|
{`AED ${Intl.NumberFormat("ar-AE", {
|
|
currency: "AED",
|
|
minimumFractionDigits: 0,
|
|
}).format(unit.salesPrice)}`}
|
|
</p> */}
|
|
</div>
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
export default UnitCard;
|