111 lines
3.5 KiB
TypeScript
111 lines
3.5 KiB
TypeScript
import { useNavigate } from "react-router-dom";
|
|
import Button from "../Button";
|
|
import HeartIcon from "../icons/Heart";
|
|
import { IAparmentRes } from "../../types/apartmentsRes";
|
|
import { useEffect, useState } from "react";
|
|
|
|
interface LayoutCardProps {
|
|
apartmentCard: IAparmentRes;
|
|
}
|
|
|
|
const LayoutCard = ({ apartmentCard }: LayoutCardProps) => {
|
|
const {
|
|
Project_Name: projectName,
|
|
Floor: floor,
|
|
id,
|
|
Unit_No: unit,
|
|
Unit_Type: unitType,
|
|
Total_Area_Sqft: _totalArea,
|
|
} = apartmentCard;
|
|
const wing = unit.split("-")[0] === "E" ? "East" : "West";
|
|
const unitNumber = unit.split("-")[1];
|
|
const totalArea = `${_totalArea}`.split(".").join(",");
|
|
const [isFavorite, setIsFavorite] = useState(false);
|
|
|
|
const navigate = useNavigate();
|
|
|
|
const handleOnClick = () => {
|
|
navigate(`${id}`);
|
|
};
|
|
|
|
const handleOnFavoriteClick = () => {
|
|
const favorites = localStorage.getItem("Favorites");
|
|
|
|
if (!favorites) {
|
|
setIsFavorite(true);
|
|
const updatedFavorites = JSON.stringify([apartmentCard]);
|
|
localStorage.setItem("Favorites", updatedFavorites);
|
|
} else {
|
|
const _favorites = JSON.parse(favorites) as IAparmentRes[];
|
|
if (_favorites.some((apart) => apart.id === apartmentCard.id)) {
|
|
setIsFavorite(false);
|
|
const updatedFavorites = [..._favorites].filter(
|
|
(apart) => apart.id !== apartmentCard.id
|
|
);
|
|
const convertedFavorites = JSON.stringify(updatedFavorites);
|
|
localStorage.setItem("Favorites", convertedFavorites);
|
|
} else {
|
|
setIsFavorite(true);
|
|
const updatedFavorites = [..._favorites, apartmentCard];
|
|
const convertedFavorites = JSON.stringify(updatedFavorites);
|
|
localStorage.setItem("Favorites", convertedFavorites);
|
|
}
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
const favorites = localStorage.getItem("Favorites");
|
|
if (favorites) {
|
|
const _isFavorite = (JSON.parse(favorites) as IAparmentRes[]).some(
|
|
(apart) => apart.id === apartmentCard.id
|
|
);
|
|
setIsFavorite(_isFavorite);
|
|
}
|
|
}, [apartmentCard.id]);
|
|
|
|
return (
|
|
<div
|
|
className="bg-white flex flex-col p-4 rounded-2xl cursor-pointer select-none"
|
|
onClick={handleOnClick}
|
|
>
|
|
<div className="flex gap-4 justify-between">
|
|
<div className="flex gap-1 flex-col">
|
|
<p className="text-[#00BED7] text-s leading-5">{projectName}</p>
|
|
<div className="text-[#73787C] flex gap-2 items-center w-fit">
|
|
<p className="text-caption-m font-semibold leading-4">
|
|
{wing} Wing
|
|
</p>
|
|
<div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
|
|
<p className="text-caption-m font-semibold leading-4">
|
|
Floor {floor}
|
|
</p>
|
|
<div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
|
|
<p className="text-caption-m font-semibold leading-4">
|
|
№ {unitNumber}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<Button
|
|
onClick={handleOnFavoriteClick}
|
|
icon={<HeartIcon isFilled={isFavorite} />}
|
|
buttonType="favorite"
|
|
isCircleRounded
|
|
/>
|
|
</div>
|
|
<div className="w-full aspect-square rounded-lg pt-6">
|
|
<img src="/images/layout-1.png" alt="" className="h-full" />
|
|
</div>
|
|
<div className="flex flex-col gap-1 pt-6">
|
|
<p className="text-[#0D1922] text-s">
|
|
{unitType}, {totalArea} Sqft
|
|
</p>
|
|
<p className="text-[#00BED7] text-subheadline-s font-semibold">
|
|
Unavailable
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default LayoutCard;
|