This commit is contained in:
2024-07-26 17:38:47 +05:00
parent b3e6ff5e9c
commit 08b86c8b51
14 changed files with 520 additions and 298 deletions
+26 -5
View File
@@ -7,10 +7,11 @@ import BookingIcon from "../icons/BookingIcon";
import HeartIcon from "../icons/HeartIcon";
import VirtualTourIcon from "../icons/VirtualTourIcon";
import unitTypes from "../../data/unitTypes.json";
import { useNavigate } from "react-router-dom";
import { useLocation, useNavigate, useSearchParams } from "react-router-dom";
import { useEffect } from "react";
import useFavoritesStore from "../../store/useFavoritesStore";
import HeartFilledIcon from "../icons/HeartFilledIcon";
import ShareIcon from "../icons/ShareIcon";
interface Props {
unit: IUnit;
@@ -21,6 +22,8 @@ function UnitModal({ unit, type }: Props) {
const { setModal } = useModal();
const navigate = useNavigate();
const { favoriteUnits, setFavoriteUnits } = useFavoritesStore();
const [searchParams, setSearchParams] = useSearchParams();
const location = useLocation();
function getViewImage(): string {
const unitView = unit.unitView;
@@ -190,11 +193,15 @@ function UnitModal({ unit, type }: Props) {
}
useEffect(() => {
console.log("type", type);
searchParams.set("unitNo", unit.unitNo);
setSearchParams(searchParams);
document.body.classList.add("overflow-y-hidden");
return () => {
searchParams.delete("unitNo");
setSearchParams(searchParams);
document.body.classList.remove("overflow-y-hidden");
};
}, []);
@@ -221,7 +228,19 @@ function UnitModal({ unit, type }: Props) {
}
</p>
</div>
<div className="">
<div className="flex gap-2">
<button
className="w-10 h-10 flex items-center justify-center border border-[#E2E2DC] rounded-full bg-[#FFFFFF] bg-opacity-80 hover:text-[#0D1922] hover:bg-opacity-100 hover:border-[#00BED7] transition-all"
onClick={() =>
navigator.share({
title: "IRTH",
text: `${unit.unitNo}`,
url: `/search${location.search}`,
})
}
>
<ShareIcon className="w-5 h-5" />
</button>
<button
className="w-10 h-10 flex items-center justify-center border border-[#E2E2DC] rounded-full bg-[#FFFFFF] bg-opacity-80 hover:text-[#0D1922] hover:bg-opacity-100 hover:border-[#00BED7] transition-all"
onClick={() => addOrRemoveFromFavorites(unit)}
@@ -277,7 +296,7 @@ function UnitModal({ unit, type }: Props) {
<div className="bg-white p-6 rounded-2xl space-y-6">
<div className="space-y-2 border-b border-[E2E2DC] pb-4">
<p className="text-xl text-[#0D1922] font-semibold">
{unit.unitType}, {unit.totalArea} Sqft
{unit.unitName}, {unit.totalArea} Sqft
</p>
<div className="">
<p className="text-sm text-[#00BED7]">
@@ -337,7 +356,9 @@ function UnitModal({ unit, type }: Props) {
icon={<VirtualTourIcon />}
text="3D tour"
className="justify-center text-sm w-full"
onClick={() => navigate(`/virtual-tour/${type}?unitNo=${unit.unitNo}`)}
onClick={() =>
navigate(`/virtual-tour/${type}?unitNo=${unit.unitNo}`)
}
/>
)}
<Button
@@ -7,10 +7,11 @@ import BookingIcon from "../icons/BookingIcon";
import HeartIcon from "../icons/HeartIcon";
import VirtualTourIcon from "../icons/VirtualTourIcon";
import unitTypes from "../../data/unitTypes.json";
import { useNavigate } from "react-router-dom";
import { useLocation, useNavigate, useSearchParams } from "react-router-dom";
import { useEffect } from "react";
import useFavoritesStore from "../../store/useFavoritesStore";
import HeartFilledIcon from "../icons/HeartFilledIcon";
import ShareIcon from "../icons/ShareIcon";
interface Props {
unit: IUnit;
@@ -21,6 +22,8 @@ function UnitModalForSearchPage({ unit, type }: Props) {
const { setModal } = useModal();
const navigate = useNavigate();
const { favoriteUnits, setFavoriteUnits } = useFavoritesStore();
const [searchParams, setSearchParams] = useSearchParams();
const location = useLocation();
function getViewImage(): string {
const unitView = unit.unitView;
@@ -190,9 +193,15 @@ function UnitModalForSearchPage({ unit, type }: Props) {
}
useEffect(() => {
searchParams.set("unitNo", unit.unitNo);
setSearchParams(searchParams);
document.body.classList.add("overflow-y-hidden");
return () => {
searchParams.delete("unitNo");
setSearchParams(searchParams);
document.body.classList.remove("overflow-y-hidden");
};
}, []);
@@ -219,7 +228,19 @@ function UnitModalForSearchPage({ unit, type }: Props) {
}
</p>
</div>
<div className="">
<div className="flex gap-2">
<button
className="w-10 h-10 flex items-center justify-center border border-[#E2E2DC] rounded-full bg-[#FFFFFF] bg-opacity-80 hover:text-[#0D1922] hover:bg-opacity-100 hover:border-[#00BED7] transition-all"
onClick={() =>
navigator.share({
title: "IRTH",
text: `${unit.unitNo}`,
url: location.hash,
})
}
>
<ShareIcon className="w-5 h-5" />
</button>
<button
className="w-10 h-10 flex items-center justify-center border border-[#E2E2DC] rounded-full bg-[#FFFFFF] bg-opacity-80 hover:text-[#0D1922] hover:bg-opacity-100 hover:border-[#00BED7] transition-all"
onClick={() => addOrRemoveFromFavorites(unit)}
@@ -275,7 +296,7 @@ function UnitModalForSearchPage({ unit, type }: Props) {
<div className="bg-white p-6 rounded-2xl space-y-6">
<div className="space-y-2 border-b border-[E2E2DC] pb-4">
<p className="text-xl text-[#0D1922] font-semibold">
{unit.unitType}, {unit.totalArea} Sqft
{unit.unitName}, {unit.totalArea} Sqft
</p>
<div className="">
<p className="text-sm text-[#00BED7]">