110 lines
4.1 KiB
TypeScript
110 lines
4.1 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";
|
|
import complexNameToSlug from "../utils/complexNameToSlug";
|
|
import { projects } from "../data/projects";
|
|
import { useEffect, useState } from "react";
|
|
import { getUnitTypeVariantMarasiDrive } from "../utils/getUnitTypeVariantMarasiDrive";
|
|
import { getUnitTypeVariantDubaiMarina } from "../utils/getUnitTypeVariantDubaiMarina";
|
|
|
|
function UnitCard({ unit }: { unit: Unit }) {
|
|
const { favoriteUnits, setFavoriteUnits } = useFavoritesUnitsStore();
|
|
const [complexSlug, setComplexSlug] = useState("");
|
|
|
|
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]);
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
const complexSlug = projects.find(
|
|
(project) => project.title === unit.project
|
|
)?.slug;
|
|
|
|
if (complexSlug) {
|
|
setComplexSlug(complexSlug);
|
|
}
|
|
}, [unit]);
|
|
|
|
return (
|
|
<Link
|
|
target="_blank"
|
|
to={`/complex/${complexNameToSlug(unit.project)}/${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-[translate,box-shadow] duration-300 hover:[box-shadow:0_4px_16px_0_rgba(0,0,0,.1)]"
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
<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">
|
|
<p className="text-caption-m">
|
|
<span>
|
|
{`${unit.unitNo.split("-")[0] === "W" ? "West" : "East"} 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/${complexSlug}/${
|
|
complexSlug === "marasi-drive"
|
|
? getUnitTypeVariantMarasiDrive(unit.unitNo)
|
|
: getUnitTypeVariantDubaiMarina(unit.unitNo)
|
|
}.jpg`}
|
|
alt=""
|
|
className="object-cover pointer-events-none"
|
|
/>
|
|
</div>
|
|
<div className="2xl:space-y-[0.278vw] space-y-1">
|
|
<p className="text-s">
|
|
{`${formattedUnitTypes.get(
|
|
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;
|