bug fix

src/components/ViewToggle.tsx

@@ -38,9 +38,9 @@ const ViewToggle = ({ offset, isDesktop }: ViewSwitcherProps) => {
       <div
         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`}
+        } even bg-white rounded-[32px] flex text-sm justify-center w-fit transition-all duration-300 ease-in-out select-none cursor-pointer mx-auto`}
         style={{
-          opacity: offset ? offset : 1,
+          opacity: offset,
           pointerEvents: `${offset === 0 ? "none" : "auto"}`,
         }}
       >

src/components/desktop/ParameterDescription.tsx

@@ -1,33 +1,33 @@
-import { Parameters } from "../../types/appartment";
+import useStore from "../../store/store";
 
-type ParameterDescriptionProps = {
-  params: Parameters;
-};
+const ParameterDescription = () => {
+  const { currentVilla } = useStore();
 
-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>
+      <h2 className="text-[#050409] font-medium text-2xl">
+        {currentVilla && currentVilla.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>{currentVilla && currentVilla.villaTheme}</div>
         </div>
         <div className="flex gap-4">
           <div className="text-[#666668]">Total no. of Bedrooms</div>
-          <div>{params.totalCountBedroms}</div>
+          <div>{currentVilla && currentVilla.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>{currentVilla && currentVilla.plotArea}</div>
         </div>
         <div className="flex gap-4">
           <div className="text-[#666668]">Total Build up Area</div>
-          <div>{params.totalBuildUpArea}</div>
+          <div>{currentVilla && currentVilla.totalBuildUpArea}</div>
         </div>
       </div>
     </div>

src/components/mobile/Appartment/HelpPanel.tsx

@@ -1,4 +1,3 @@
-import { A1MViewParams } from "../../../consts/viewParams";
 import CrossIcon from "../../../icons/CrossIcon";
 import useStore from "../../../store/store";
 import ButtonPanel from "./ButtonPanel";
@@ -8,7 +7,7 @@ const HelpPanel = () => {
   const { setPanel, setModal } = useStore();
 
   const handleOnClose = () => {
-    setModal(<ViewControllerModal parameters={A1MViewParams} />);
+    setModal(<ViewControllerModal />);
     setPanel(<ButtonPanel />);
   };
 

src/components/mobile/Appartment/ImageSlider.tsx

@@ -1,15 +1,18 @@
-import { Parameters as ParametersType } from "../../../types/appartment";
+import useStore from "../../../store/store";
 
-type ImageSliderProps = {
-  parameters: ParametersType;
-};
-
-const ImageSlider = ({ parameters }: ImageSliderProps) => {
+const ImageSlider = () => {
+  const { currentVilla } = useStore();
   return (
     <div className="flex p-6 gap-2 overflow-x-scroll">
-      {parameters.perspectiveWorkings.map((working) => (
-        <img className="rounded-lg" src={working} alt="" key={working} />
-      ))}
+      {currentVilla &&
+        currentVilla.perspectiveWorkings.map((working) => (
+          <img
+            className="rounded-lg"
+            src={working.image}
+            alt=""
+            key={working.id}
+          />
+        ))}
     </div>
   );
 };

src/components/mobile/Appartment/LayoutSlider.tsx

@@ -1,13 +1,16 @@
 import { useState } from "react";
 import { useSwipeable } from "react-swipeable";
-import { SliderType } from "../../../types/appartment";
+import useStore from "../../../store/store";
 
-type LayoutSliderProps = {
-  sliders: SliderType[];
-};
+const titleViews = [
+  { id: 1, value: "Ground Floor" },
+  { id: 2, value: "First Floor" },
+  { id: 3, value: "Parking" },
+];
 
-const LayoutSlider = ({ sliders }: LayoutSliderProps) => {
+const LayoutSlider = () => {
   const [offset, setOffset] = useState(0);
+  const { currentVilla } = useStore();
 
   const handleOnRight = () => {
     if (offset < 0) {
@@ -16,7 +19,7 @@ const LayoutSlider = ({ sliders }: LayoutSliderProps) => {
   };
 
   const handleOnLeft = () => {
-    if (offset > 1 - sliders.length) {
+    if (currentVilla?.sliders && offset > 1 - currentVilla.sliders.length) {
       setOffset((prev) => prev - 1);
     }
   };
@@ -34,9 +37,12 @@ const LayoutSlider = ({ sliders }: LayoutSliderProps) => {
             transform: `translateY(${offset * 28}px)`,
           }}
         >
-          {sliders.map(({ title }) => (
-            <h2 key={title} className="h-7 font-medium text-[16px] text-center">
-              {title}
+          {titleViews.map((title) => (
+            <h2
+              key={title.id}
+              className="h-7 font-medium text-[16px] text-center"
+            >
+              {title.value}
             </h2>
           ))}
         </div>
@@ -49,26 +55,28 @@ const LayoutSlider = ({ sliders }: LayoutSliderProps) => {
             transform: `translateX(${offset * 100}vw)`,
           }}
         >
-          {sliders.map((slider) => (
-            <div
-              className={`h-full min-w-full flex flex-col px-6 transition-all duration-300`}
-              key={slider.title}
-            >
-              <img src={slider.image} alt="" />
-            </div>
-          ))}
+          {currentVilla?.sliders &&
+            currentVilla.sliders.map((slider) => (
+              <div
+                className={`h-full min-w-full flex flex-col px-6 transition-all duration-300`}
+                key={slider.id}
+              >
+                <img src={slider.image} alt="" />
+              </div>
+            ))}
         </div>
       </div>
       <div className="flex justify-center pb-4">
-        {sliders.map(({ title }, index) => (
-          <div className="p-1" key={title}>
-            <div
-              className={`w-2 h-2  rounded-full transition-all duration-300 ${
-                0 - index === offset ? "bg-[#050409]" : "bg-[#DDD7D6]"
-              }`}
-            ></div>
-          </div>
-        ))}
+        {currentVilla?.sliders &&
+          currentVilla.sliders.map((slider, index) => (
+            <div className="p-1" key={slider.id}>
+              <div
+                className={`w-2 h-2  rounded-full transition-all duration-300 ${
+                  0 - index === offset ? "bg-[#050409]" : "bg-[#DDD7D6]"
+                }`}
+              ></div>
+            </div>
+          ))}
       </div>
     </div>
   );

src/components/mobile/Appartment/Parameters.tsx

@@ -1,30 +1,32 @@
-import { Parameters } from "../../../types/appartment";
+import useStore from "../../../store/store";
 
-type ParametersProps = {
-  parameters: Parameters;
-};
+const Parameters = () => {
+  const { currentVilla } = useStore();
 
-const Parameters = ({ parameters }: ParametersProps) => {
   return (
     <div className="p-6 border-b">
       <h2 className="text-xl font-medium ">Parameters</h2>
       <div className="flex flex-col gap-2 pt-4">
         <div className="flex justify-between gap-4">
           <div className="w-1/2 text-sm text-[#666668] font-medium">Type</div>
-          <div className="w-1/2 text-sm font-medium">{parameters.type}</div>
+          <div className="w-1/2 text-sm font-medium">
+            {currentVilla && currentVilla.type}
+          </div>
         </div>
         <div className="flex justify-between gap-4">
           <div className="w-1/2 text-sm text-[#666668] font-medium">
             Plot area
           </div>
-          <div className="w-1/2 text-sm font-medium">{parameters.plotArea}</div>
+          <div className="w-1/2 text-sm font-medium">
+            {currentVilla && currentVilla.plotArea}
+          </div>
         </div>
         <div className="flex justify-between gap-4">
           <div className="w-1/2 text-sm text-[#666668] font-medium">
             Total Build up Area
           </div>
           <div className="w-1/2 text-sm font-medium">
-            {parameters.totalBuildUpArea}
+            {currentVilla && currentVilla.totalBuildUpArea}
           </div>
         </div>
         <div className="flex justify-between gap-4">
@@ -32,7 +34,7 @@ const Parameters = ({ parameters }: ParametersProps) => {
             Total no. of Bedrooms
           </div>
           <div className="w-1/2 text-sm font-medium">
-            {parameters.totalCountBedroms}
+            {currentVilla && currentVilla.totalCountBedroms}
           </div>
         </div>
         <div className="flex justify-between gap-4">
@@ -40,7 +42,7 @@ const Parameters = ({ parameters }: ParametersProps) => {
             Villa Theme
           </div>
           <div className="w-1/2 text-sm font-medium">
-            {parameters.villaTheme}
+            {currentVilla && currentVilla.villaTheme}
           </div>
         </div>
       </div>

src/components/mobile/Appartment/PopupModal.tsx

@@ -1,7 +1,6 @@
 import { useState } from "react";
 import useStore from "../../../store/store";
 import ViewControllerModal from "./ViewControllerModal";
-import { A1MViewParams } from "../../../consts/viewParams";
 import ButtonPanel from "./ButtonPanel";
 import { popups } from "../../../consts/popups";
 
@@ -14,7 +13,7 @@ const PopupModal = () => {
   };
 
   const handleOnComplete = () => {
-    setModal(<ViewControllerModal parameters={A1MViewParams} />);
+    setModal(<ViewControllerModal />);
     setPanel(<ButtonPanel />);
   };
 

src/components/mobile/Appartment/ViewControllerModal.tsx

@@ -1,20 +1,14 @@
 import { useEffect, useState } from "react";
 import { SwipeEventData, useSwipeable } from "react-swipeable";
 import ButtonSwipperIcon from "../../../icons/ButtonSwipperIcon";
-import { Parameters as ParametersType } from "../../../types/appartment";
+// import { Parameters as ParametersType } from "../../../types/appartment";
 import Parameters from "./Parameters";
-// import LayoutSlider from "./LayoutSlider";
-// import LayoutSlider from "./ImageSlider";
 import LayoutSlider from "./LayoutSlider";
 import ImageSlider from "./ImageSlider";
 import ViewToggle from "../../ViewToggle";
 
-type ViewControllerModalProps = {
-  parameters: ParametersType;
-};
-
-const ViewControllerModal = ({ parameters }: ViewControllerModalProps) => {
-  const { sliders } = parameters;
+const ViewControllerModal = () => {
+  // const { sliders } = parameters;
   const [offset, setOffset] = useState(1);
   const [isTouchable, setIsTouchable] = useState(true);
   const [scrollY, setScrollY] = useState(0);
@@ -69,9 +63,9 @@ const ViewControllerModal = ({ parameters }: ViewControllerModalProps) => {
           className="h-[calc(100vh-110px)] overflow-y-scroll relative"
           onScroll={handleOnScroll}
         >
-          <LayoutSlider sliders={sliders} />
-          <Parameters parameters={parameters} />
-          <ImageSlider parameters={parameters} />
+          <LayoutSlider />
+          <Parameters />
+          <ImageSlider />
         </div>
         <div className="px-6 py-4 mt-auto border">
           <button