starting map

src/components/HelpButton.tsx

@@ -7,7 +7,7 @@ type HelpButtonProps = {
 const HelpButton = ({ handleOnHelpClick }: HelpButtonProps) => {
   return (
     <button
-      className="bg-white border-[#C7BDBA] p-[6px] rounded-full"
+      className="bg-white border-[#C7BDBA] p-[6px] rounded-full h-8 w-8"
       onClick={handleOnHelpClick}
     >
       <HelpIcon />

src/components/Map.tsx

@@ -0,0 +1,56 @@
+import Color from "@arcgis/core/Color";
+import { useRef, useEffect } from "react";
+import Graphic from "@arcgis/core/Graphic";
+import Mesh from "@arcgis/core/geometry/Mesh";
+import Point from "@arcgis/core/geometry/Point";
+import MapView from "@arcgis/core/views/MapView";
+import Map from "@arcgis/core/Map";
+
+const MapComponent = () => {
+  const mapRef = useRef(null);
+
+  const point = new Point({
+    longitude: 55,
+    latitude: 25,
+  });
+
+  const mesh = Mesh.createBox(point, {
+    size: {
+      width: 100,
+      height: 50,
+      depth: 50,
+    },
+  });
+
+  const markerSymbol = {
+    type: "simple-marker",
+    color: [226, 119, 40],
+  };
+
+  const pointGraphic = new Graphic({
+    geometry: mesh,
+    symbol: markerSymbol,
+  });
+
+  useEffect(() => {
+    if (!mapRef?.current) return;
+    const map = new Map({
+      basemap: "osm",
+    });
+
+    const view = new MapView({
+      map: map,
+      container: mapRef.current,
+      center: [55, 25],
+      zoom: 13,
+    });
+
+    view.graphics.add(pointGraphic);
+
+    return () => view && view.destroy();
+  }, []);
+
+  return <div ref={mapRef} className="w-[500px] h-[500px] bg-slate-50"></div>;
+};
+
+export default MapComponent;

src/components/ResizeButton.tsx

@@ -7,7 +7,7 @@ type ResizeButtonProps = {
 const ResizeButton = ({ handleOnHelpClick }: ResizeButtonProps) => {
   return (
     <button
-      className="bg-white border-[#C7BDBA] p-[6px] rounded-full"
+      className="bg-white border-[#C7BDBA] p-[6px] rounded-full w-8 h-8"
       onClick={handleOnHelpClick}
     >
       <ResizeIcon />

src/components/ViewToggle.tsx

@@ -1,5 +1,4 @@
-import { useState } from "react";
-import useStore from "../../../store/store";
+import useStore from "../store/store";
 
 type ViewSwitcherProps = {
   offset?: number;
@@ -7,25 +6,24 @@ type ViewSwitcherProps = {
 };
 
 const ViewToggle = ({ offset, isDesktop }: ViewSwitcherProps) => {
-  const [selectedViewId, setSelectedViewId] = useState(1);
-  const { sendMessageToUnity } = useStore();
+  const { sendMessageToUnity, setCurrentView, currentView } = useStore();
 
   const handleOnFirstClick = () => {
-    setSelectedViewId(1);
+    setCurrentView(1);
     if (sendMessageToUnity) {
       sendMessageToUnity("LevelSwitcher", "LoadSceneSingle", "Outdoor/A1");
     }
   };
 
   const handleOnSecondClick = () => {
-    setSelectedViewId(2);
+    setCurrentView(2);
     if (sendMessageToUnity) {
       sendMessageToUnity("LevelSwitcher", "LoadSceneSingle", "Indoor/A1F1");
     }
   };
 
   const handleOnThirdClick = () => {
-    setSelectedViewId(3);
+    setCurrentView(3);
     if (sendMessageToUnity) {
       sendMessageToUnity("LevelSwitcher", "LoadSceneSingle", "Indoor/A1F2");
     }
@@ -38,7 +36,9 @@ const ViewToggle = ({ offset, isDesktop }: ViewSwitcherProps) => {
       } h-9 px-6 `}
     >
       <div
-        className={`even bg-white rounded-[32px] flex text-sm justify-center w-fit border-2 transition-all duration-300 ease-in-out  select-none cursor-pointer`}
+        className={`${
+          isDesktop ? "" : "border-2"
+        } even bg-white rounded-[32px] flex text-sm justify-center w-fit transition-all duration-300 ease-in-out select-none cursor-pointer`}
         style={{
           opacity: offset ? offset : 1,
           pointerEvents: `${offset === 0 ? "none" : "auto"}`,
@@ -47,7 +47,7 @@ const ViewToggle = ({ offset, isDesktop }: ViewSwitcherProps) => {
         <div
           onClick={handleOnFirstClick}
           className={`${
-            selectedViewId === 1 ? "bg-black text-white" : ""
+            currentView === 1 ? "bg-black text-white" : ""
           }  py-2 px-4 w-fit rounded-[32px] `}
         >
           {" "}
@@ -56,7 +56,7 @@ const ViewToggle = ({ offset, isDesktop }: ViewSwitcherProps) => {
         <div
           onClick={handleOnSecondClick}
           className={`${
-            selectedViewId === 2 ? "bg-black text-white" : ""
+            currentView === 2 ? "bg-black text-white" : ""
           }  py-2 px-4 w-fit rounded-[32px] `}
         >
           {" "}
@@ -65,7 +65,7 @@ const ViewToggle = ({ offset, isDesktop }: ViewSwitcherProps) => {
         <div
           onClick={handleOnThirdClick}
           className={`${
-            selectedViewId === 3 ? "bg-black text-white" : ""
+            currentView === 3 ? "bg-black text-white" : ""
           }  py-2 px-4 w-fit rounded-[32px] `}
         >
           {" "}

src/components/desktop/ButtonPanel.tsx

@@ -0,0 +1,26 @@
+import HelpButton from "../HelpButton";
+import ResizeButton from "../ResizeButton";
+import ViewToggle from "../ViewToggle";
+
+const ButtonPanel = () => {
+  return (
+    <div className="absolute top-0 w-full p-4 flex justify-between h-10">
+      <div />
+      <ViewToggle isDesktop />
+      <div className="flex gap-2 w-fit">
+        <HelpButton
+          handleOnHelpClick={function (): void {
+            throw new Error("Function not implemented.");
+          }}
+        />
+        <ResizeButton
+          handleOnHelpClick={function (): void {
+            throw new Error("Function not implemented.");
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default ButtonPanel;

src/components/desktop/ImagesButton.tsx

@@ -0,0 +1,19 @@
+import ImagesIcon from "../../icons/ImagesIcon";
+
+type ImagesButtonProps = {
+  onClick: () => void;
+};
+
+const ImagesButton = ({ onClick }: ImagesButtonProps) => {
+  return (
+    <button
+      onClick={onClick}
+      className="bg-white py-[6px] pr-5 pl-4 rounded-full border-[#C7BDBA] flex gap-1"
+    >
+      <ImagesIcon />
+      Images
+    </button>
+  );
+};
+
+export default ImagesButton;

src/components/desktop/LayoutButton.tsx

@@ -0,0 +1,19 @@
+import LayoutIcon from "../../icons/LayoutIcon";
+
+type LayoutButtonProps = {
+  onClick: () => void;
+};
+
+const LayoutButton = ({ onClick }: LayoutButtonProps) => {
+  return (
+    <button
+      onClick={onClick}
+      className="bg-white py-[6px] pr-5 pl-4 rounded-full border-[#C7BDBA] flex gap-1"
+    >
+      <LayoutIcon />
+      Layout
+    </button>
+  );
+};
+
+export default LayoutButton;

src/components/desktop/LayoutsButtonContainer.tsx

@@ -0,0 +1,23 @@
+import ImagesButton from "./ImagesButton";
+import LayoutButton from "./LayoutButton";
+
+const LayoutsButtonContainer = () => {
+  return (
+    <div className="absolute w-full bottom-0 flex justify-end py-5">
+      <div className=" flex gap-2 items-center px-4 font-medium text-sm text-[#050409]">
+        <LayoutButton
+          onClick={function (): void {
+            throw new Error("Function not implemented.");
+          }}
+        />
+        <ImagesButton
+          onClick={function (): void {
+            throw new Error("Function not implemented.");
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default LayoutsButtonContainer;

src/components/desktop/ParameterDescription.tsx

@@ -0,0 +1,37 @@
+import { Parameters } from "../../types/appartment";
+
+type ParameterDescriptionProps = {
+  params: Parameters;
+};
+
+const ParameterDescription = ({ params }: ParameterDescriptionProps) => {
+  return (
+    <div className="flex py-6 gap-6 items-center justify-center border">
+      <h2 className="text-[#050409] font-medium text-2xl">{params.type}</h2>
+      <div className="h-8 bg-[#DDD7D6] w-[1px]" />
+      <div className="flex flex-col">
+        <div className="flex gap-4 justify-between">
+          <div className="text-[#666668]">Villa Theme</div>
+          <div>{params.villaTheme}</div>
+        </div>
+        <div className="flex gap-4">
+          <div className="text-[#666668]">Total no. of Bedrooms</div>
+          <div>{params.totalCountBedroms}</div>
+        </div>
+      </div>
+      <div className="h-8 bg-[#DDD7D6] w-[1px]" />
+      <div className="flex flex-col">
+        <div className="flex gap-4 justify-between">
+          <div className="text-[#666668]">Plot area</div>
+          <div>{params.plotArea}</div>
+        </div>
+        <div className="flex gap-4">
+          <div className="text-[#666668]">Total Build up Area</div>
+          <div>{params.totalBuildUpArea}</div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ParameterDescription;

src/components/mobile/Appartment/BackButton.tsx

@@ -0,0 +1,14 @@
+import BackIcon from "../../../icons/BackIcon";
+
+const BackButton = () => {
+  return (
+    <button className="flex w-fit items-center gap-1 py-[6px] pl-2 pr-4 bg-white rounded-full text-sm font-medium border border-[#C7BDBA]">
+      <div className="w-5 h-5 flex items-center justify-center">
+        <BackIcon className="w-[5px] h-[10px]" />
+      </div>
+      Back
+    </button>
+  );
+};
+
+export default BackButton;

src/components/mobile/Appartment/ButtonPanel.tsx

@@ -1,9 +1,8 @@
-import BackIcon from "../../../icons/BackIcon";
-import HelpIcon from "../../../icons/HelpIcon";
 import useStore from "../../../store/store";
 import PopupModal from "./PopupModal";
 import HelpPanel from "./HelpPanel";
 import HelpButton from "../../HelpButton";
+import BackButton from "./BackButton";
 
 const ButtonPanel = () => {
   const { setModal, setPanel } = useStore();
@@ -17,19 +16,8 @@ const ButtonPanel = () => {
     <>
       {
         <div className="flex w-full absolute p-4 justify-between top-0 left-0">
-          <button className="flex w-fit items-center gap-1 py-[6px] pl-2 pr-4 bg-white rounded-full text-sm font-medium border border-[#C7BDBA]">
-            <div className="w-5 h-5 flex items-center justify-center">
-              <BackIcon className="w-[5px] h-[10px]" />
-            </div>
-            Back
-          </button>
+          <BackButton />
           <HelpButton handleOnHelpClick={handleOnHelpClick} />
-          {/* <button
-            className="bg-white border-[#C7BDBA] p-[6px] rounded-full"
-            onClick={handleOnHelpClick}
-          >
-            <HelpIcon />
-          </button> */}
         </div>
       }
     </>

src/components/mobile/Appartment/LayoutSlider.tsx

@@ -2,11 +2,11 @@ import { useState } from "react";
 import { useSwipeable } from "react-swipeable";
 import { SliderType } from "../../../types/appartment";
 
-type SliderProps = {
+type LayoutSliderProps = {
   sliders: SliderType[];
 };
 
-const Slider = ({ sliders }: SliderProps) => {
+const LayoutSlider = ({ sliders }: LayoutSliderProps) => {
   const [offset, setOffset] = useState(0);
 
   const handleOnRight = () => {
@@ -74,4 +74,4 @@ const Slider = ({ sliders }: SliderProps) => {
   );
 };
 
-export default Slider;
+export default LayoutSlider;

src/components/mobile/Appartment/Parameters.tsx

@@ -32,7 +32,7 @@ const Parameters = ({ parameters }: ParametersProps) => {
             Total no. of Bedrooms
           </div>
           <div className="w-1/2 text-sm font-medium">
-            {parameters.TotalCountBedroms}
+            {parameters.totalCountBedroms}
           </div>
         </div>
         <div className="flex justify-between gap-4">

src/components/mobile/Appartment/ViewControllerModal.tsx

@@ -3,9 +3,11 @@ import { SwipeEventData, useSwipeable } from "react-swipeable";
 import ButtonSwipperIcon from "../../../icons/ButtonSwipperIcon";
 import { Parameters as ParametersType } from "../../../types/appartment";
 import Parameters from "./Parameters";
-import Slider from "./Slider";
+// import LayoutSlider from "./LayoutSlider";
+// import LayoutSlider from "./ImageSlider";
+import LayoutSlider from "./LayoutSlider";
 import ImageSlider from "./ImageSlider";
-import ViewToggle from "./ViewToggle";
+import ViewToggle from "../../ViewToggle";
 
 type ViewControllerModalProps = {
   parameters: ParametersType;
@@ -67,7 +69,7 @@ const ViewControllerModal = ({ parameters }: ViewControllerModalProps) => {
           className="h-[calc(100vh-110px)] overflow-y-scroll relative"
           onScroll={handleOnScroll}
         >
-          <Slider sliders={sliders} />
+          <LayoutSlider sliders={sliders} />
           <Parameters parameters={parameters} />
           <ImageSlider parameters={parameters} />
         </div>