68 lines
2.2 KiB
TypeScript
68 lines
2.2 KiB
TypeScript
import { useNavigate } from "react-router-dom";
|
|
import useStore from "../store/store";
|
|
import { Villa } from "../types/appartment";
|
|
import KnowMoreButton from "./mobile/Main/KnowMoreButton";
|
|
import ViewOnMapButton from "./mobile/Main/ViewOnMapButton";
|
|
|
|
type HouseItemProps = {
|
|
villa: Villa;
|
|
};
|
|
|
|
const HouseItem = ({ villa }: HouseItemProps) => {
|
|
const { setSelectedOnMapVilla, setModal, selectedOnMapVilla } = useStore();
|
|
const navigate = useNavigate();
|
|
|
|
const handleOnViewOnMapClick = () => {
|
|
setSelectedOnMapVilla(villa);
|
|
};
|
|
|
|
const handleOnKnowMoreButton = () => {
|
|
setModal(null);
|
|
navigate(`/${villa.type}`);
|
|
};
|
|
|
|
return (
|
|
<div className={`flex flex-col border border-[#DDD7D6] rounded-2xl`}>
|
|
<div className="flex w-full text-[12px] font-medium">
|
|
<div className="w-1/2 overflow-clip p-2">
|
|
<div className="w-full min-w-full h-[132px] max-h-[132px] overflow-clip">
|
|
{villa?.perspectiveWorkings[0]?.image && (
|
|
<img
|
|
style={{ overflowClipMargin: "unset" }}
|
|
className="w-full h-full rounded-lg object-cover object-left"
|
|
src={villa.perspectiveWorkings[0].image}
|
|
alt=""
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="flex p-4 pl-2">
|
|
<div className="w-full flex flex-col justify-center gap-1 text-[#666668]">
|
|
<p>Type</p>
|
|
<p>Plot area, m2</p>
|
|
<p>Unit area, m2</p>
|
|
<p>Bedrooms</p>
|
|
<p>Villa Theme</p>
|
|
</div>
|
|
<div className="flex text-right flex-col w-[82px] justify-center gap-1">
|
|
<div className="uppercase">{villa.type}</div>
|
|
<div className="">{villa.plotArea}</div>
|
|
<div className="">{villa.totalBuildUpArea}</div>
|
|
<div>{villa.totalCountBedroms}</div>
|
|
<div>{villa.villaTheme}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className={`border-0 border-t-[1px] text-sm flex`}>
|
|
<ViewOnMapButton
|
|
onClick={handleOnViewOnMapClick}
|
|
isVillaSelected={selectedOnMapVilla?.type === villa.type}
|
|
/>
|
|
<KnowMoreButton onClick={handleOnKnowMoreButton} />
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default HouseItem;
|