diff --git a/src/components/header/Auth/Auth.tsx b/src/components/header/Auth/Auth.tsx
index 2cbc662..081317f 100644
--- a/src/components/header/Auth/Auth.tsx
+++ b/src/components/header/Auth/Auth.tsx
@@ -6,8 +6,8 @@ interface AuthProps {
isAuth?: boolean;
}
-const Auth = ({ isAuth = false }: AuthProps) => {
- const userName = "Name";
+const Auth = ({ isAuth = true }: AuthProps) => {
+ const userName = "Full Name";
return (
<>
diff --git a/src/components/header/Auth/AuthDesktop.tsx b/src/components/header/Auth/AuthDesktop.tsx
index fb4b47a..fc03351 100644
--- a/src/components/header/Auth/AuthDesktop.tsx
+++ b/src/components/header/Auth/AuthDesktop.tsx
@@ -10,9 +10,15 @@ const AuthDesktop = ({ isAuth, userName }: AuthProps) => {
{isAuth ? (
<>
-
-
+
-
-
+
+
+
+
);
};
diff --git a/src/components/masterplanPage/map/Marker.tsx b/src/components/masterplanPage/map/Marker.tsx
index 5196be1..ca49910 100644
--- a/src/components/masterplanPage/map/Marker.tsx
+++ b/src/components/masterplanPage/map/Marker.tsx
@@ -1,14 +1,12 @@
-/* eslint-disable react-hooks/exhaustive-deps */
import { MarkerComponentProps } from "react-image-marker";
-import { useEffect, useState } from "react";
-import { useTransformContext } from "react-zoom-pan-pinch";
+import { useState } from "react";
+import { useTransformEffect } from "react-zoom-pan-pinch";
import { markers } from "../../../consts/markers";
import useMarker from "../../../store/useMarker";
import { useNavigate } from "react-router-dom";
const Marker = (props: MarkerComponentProps) => {
const { setHoveredMarker, hoveredMarker } = useMarker();
- const { transformState } = useTransformContext();
const [markerScale, setMarkerScale] = useState(1);
const navigate = useNavigate();
const currentMarker = markers.find(
@@ -20,11 +18,6 @@ const Marker = (props: MarkerComponentProps) => {
setHoveredMarker(hoveredMarker);
};
- const handleOnScroll = () => {
- const scale = 1 / transformState.scale;
- setMarkerScale(scale);
- };
-
const handleOnMouseLeave = () => {
setHoveredMarker(null);
};
@@ -34,15 +27,10 @@ const Marker = (props: MarkerComponentProps) => {
setHoveredMarker(null);
};
- useEffect(() => {
- const map = document.querySelector(".react-transform-wrapper");
- handleOnScroll();
- if (map) map.addEventListener("wheel", handleOnScroll);
-
- return () => {
- if (map) map.removeEventListener("wheel", handleOnScroll);
- };
- }, []);
+ useTransformEffect(({ state }) => {
+ const scale = 1 / state.scale;
+ setMarkerScale(scale);
+ });
return (
{userName}
-
+
diff --git a/src/components/masterplanPage/map/Map.tsx b/src/components/masterplanPage/map/Map.tsx
index 109ef7e..3d39191 100644
--- a/src/components/masterplanPage/map/Map.tsx
+++ b/src/components/masterplanPage/map/Map.tsx
@@ -4,9 +4,11 @@ import { isMobile } from "react-device-detect";
import Marker from "./Marker";
import { markers } from "../../../consts/markers";
import useMarker from "../../../store/useMarker";
+import ZoomControlls from "./ZoomControlls";
const Map = () => {
const { hoveredMarker } = useMarker();
+
const imageMarkers: MarkerComponentProps[] = markers.map((marker) => {
return {
top: marker.top,
@@ -16,41 +18,43 @@ const Map = () => {
});
return (
-
+
+ {userName}
++ Company +
+
{/* ![avatar]()
*/}
+ FN
) : (
diff --git a/src/components/icons/UnzoomIcon.tsx b/src/components/icons/UnzoomIcon.tsx
new file mode 100644
index 0000000..fd78e10
--- /dev/null
+++ b/src/components/icons/UnzoomIcon.tsx
@@ -0,0 +1,21 @@
+const UnzoomIcon = () => {
+ return (
+
+ );
+};
+
+export default UnzoomIcon;
diff --git a/src/components/icons/ZoomIcon.tsx b/src/components/icons/ZoomIcon.tsx
new file mode 100644
index 0000000..24f5107
--- /dev/null
+++ b/src/components/icons/ZoomIcon.tsx
@@ -0,0 +1,19 @@
+const ZoomIcon = () => {
+ return (
+
+ );
+};
+
+export default ZoomIcon;
diff --git a/src/components/masterplanPage/TopPanel.tsx b/src/components/masterplanPage/TopPanel.tsx
index 70959ef..186ffe9 100644
--- a/src/components/masterplanPage/TopPanel.tsx
+++ b/src/components/masterplanPage/TopPanel.tsx
@@ -38,18 +38,21 @@ const TopPanel = () => {
buttonType="fab"
icon={ {
+ const { zoomIn, zoomOut } = useControls();
+ const handleOnZoomClick = () => {
+ zoomIn();
+ };
+
+ const handleOnUnzoomClick = () => {
+ zoomOut();
+ };
+
+ return (
+
+ }
+ isCircleRounded
+ onClick={handleOnZoomClick}
+ />
+ }
+ isCircleRounded
+ onClick={handleOnUnzoomClick}
+ />
+
+ );
+};
+
+export default ZoomControlls;
diff --git a/src/components/modals/MasterplanFilters.tsx b/src/components/modals/MasterplanFilters.tsx
index 4f475b9..9c73319 100644
--- a/src/components/modals/MasterplanFilters.tsx
+++ b/src/components/modals/MasterplanFilters.tsx
@@ -65,8 +65,8 @@ const MasterplanFilters = () => {
};
return (
-
-
+
+
- } />
+ } isCircleRounded />
);
};
diff --git a/src/components/searchApartment/SimilarSlider.tsx b/src/components/searchApartment/SimilarSlider.tsx
index 5d5c84d..a3bdbb5 100644
--- a/src/components/searchApartment/SimilarSlider.tsx
+++ b/src/components/searchApartment/SimilarSlider.tsx
@@ -47,12 +47,14 @@ const SimilarSlider = () => {
Filters
diff --git a/src/components/searchApartment/ButtonPanel.tsx b/src/components/searchApartment/ButtonPanel.tsx index 7c42ad0..c597538 100644 --- a/src/components/searchApartment/ButtonPanel.tsx +++ b/src/components/searchApartment/ButtonPanel.tsx @@ -25,7 +25,7 @@ const ButtonPanel = () => {
}
buttonType="fab"
className="rotate-180"
/>
}
onClick={handleOnRightBtnClick}
buttonType="fab"
diff --git a/src/components/searchPage/SidebarFilters.tsx b/src/components/searchPage/SidebarFilters.tsx
index ded8349..c857ed9 100644
--- a/src/components/searchPage/SidebarFilters.tsx
+++ b/src/components/searchPage/SidebarFilters.tsx
@@ -78,11 +78,12 @@ const SidebarFilters = () => {
return (
-
+
- } buttonType="favorite" />
+ }
+ buttonType="favorite"
+ isCircleRounded
+ />
diff --git a/src/components/virtualTour/ButtomPanelCompassVirualTour.tsx b/src/components/virtualTour/ButtomPanelCompassVirualTour.tsx
new file mode 100644
index 0000000..2e397ea
--- /dev/null
+++ b/src/components/virtualTour/ButtomPanelCompassVirualTour.tsx
@@ -0,0 +1,43 @@
+import useCompass from "../../store/useCompass";
+import useModal from "../../store/useModal";
+import Button from "../Button";
+import DisclaimerIcon from "../icons/DisclaimerIcon";
+import DisclaimerModal from "../modals/DisclaimerModal";
+
+const ButtomPanelCompassVirtualTour = () => {
+ const { setModal } = useModal();
+ const { currentCompassRotate } = useCompass();
+
+ const handleOnDisclaimerClick = () => {
+ setModal(
Filters
} buttonType="fab" onClick={handleOnResetClick} diff --git a/src/components/searchParticularApartmentsPage/ApartmentCard.tsx b/src/components/searchParticularApartmentsPage/ApartmentCard.tsx index 467a307..f9814bd 100644 --- a/src/components/searchParticularApartmentsPage/ApartmentCard.tsx +++ b/src/components/searchParticularApartmentsPage/ApartmentCard.tsx @@ -25,7 +25,11 @@ const ApartmentCard = () => {№ 213
diff --git a/src/components/virtualTour/ButtomPanelCompassVirualTour.tsx b/src/components/virtualTour/ButtomPanelCompassVirualTour.tsx
new file mode 100644
index 0000000..2e397ea
--- /dev/null
+++ b/src/components/virtualTour/ButtomPanelCompassVirualTour.tsx
@@ -0,0 +1,43 @@
+import useCompass from "../../store/useCompass";
+import useModal from "../../store/useModal";
+import Button from "../Button";
+import DisclaimerIcon from "../icons/DisclaimerIcon";
+import DisclaimerModal from "../modals/DisclaimerModal";
+
+const ButtomPanelCompassVirtualTour = () => {
+ const { setModal } = useModal();
+ const { currentCompassRotate } = useCompass();
+
+ const handleOnDisclaimerClick = () => {
+ setModal(
+
+ );
+};
+
+export default ButtomPanelCompassVirtualTour;
diff --git a/src/components/virtualTour/VirtualTourSidebar.tsx b/src/components/virtualTour/VirtualTourSidebar.tsx
new file mode 100644
index 0000000..5f1cf6a
--- /dev/null
+++ b/src/components/virtualTour/VirtualTourSidebar.tsx
@@ -0,0 +1,130 @@
+import { useState } from "react";
+import useSphere from "../../store/useSphere";
+import { IAppartmentSphere, ISphere } from "../../types/apartmentSphere";
+import Button from "../Button";
+import BookingIcon from "../icons/BookingIcon";
+import ChevronDownIcon from "../icons/ChevronDownIcon";
+import HeartIcon from "../icons/Heart";
+
+interface VirtualTourSidebarProps {
+ currentAppartment: null | IAppartmentSphere;
+}
+
+const VirtualTourSidebar = ({ currentAppartment }: VirtualTourSidebarProps) => {
+ const [isActive, setIsActive] = useState(false);
+ const { setSelectedSphere } = useSphere();
+ const handleOnShowClick = () => {
+ setIsActive((prev) => !prev);
+ };
+
+ const handleOnLabelClick = (sphere: ISphere) => {
+ setSelectedSphere(sphere);
+ };
+
+ return (
+
+
+
+ }
+ onClick={handleOnDisclaimerClick}
+ />
+
+
+
+
+
+ 
+
+
+
+
+ );
+};
+
+export default VirtualTourSidebar;
diff --git a/src/components/virtualTour/VirtualTourTopPanel.tsx b/src/components/virtualTour/VirtualTourTopPanel.tsx
index c113461..3bb68d7 100644
--- a/src/components/virtualTour/VirtualTourTopPanel.tsx
+++ b/src/components/virtualTour/VirtualTourTopPanel.tsx
@@ -41,11 +41,11 @@ const VirtualTourTopPanel = () => {
return (
<>
-
+
+
+
+
+
+ + Rove Home Marasi Drive{" "} +
+
+
+ + East Wing +
+ +Floor 11
+ +№ 213
+
+
+
+
+
+ 234
+
+ + 1 bedroom appartment +
+
+
+
+
+
+
+
+
+
+ Size
+609 Sqft
+
+
+ Status
+Available
+
+ }
+ text="Send Enquiry"
+ buttonType="cta"
+ className="flex-1 flex items-center justify-center"
+ />
+ } buttonType="secondary" />
+
+
+
+
+ {currentAppartment &&
+ currentAppartment.spheres.map((sphere) => {
+ return (
+
+ handleOnLabelClick(sphere)}
+ className="bg-[#F3F3F2] font-semibold text-[#0D1922] text-caption-s py-0.5 px-2 w-fit rounded-full cursor-pointer pointer-events-auto select-none"
+ key={sphere.id}
+ >
+ {sphere.roomType}
+
+ );
+ })}
+
+
+
+
+
+
+
+ Show
+
+
+ Hide
+
+
+
