map + routing

src/components/Map/Map.tsx

@@ -1,16 +1,25 @@
 import { useEffect, useRef, useState } from "react";
 import MapView from "@arcgis/core/views/MapView";
 import Map from "@arcgis/core/Map";
+
 // import { createMapView } from "../../ArcGIS-SDK";
 
 const createMapView = (container: HTMLDivElement) => {
+  // const map = new Map({
+  //   // extent:esri.geometry.geographicToWebMercator(initExtent),
+  //   slider:false
+  //   });
   const map = new Map({
-    basemap: "osm",
+    // basemap: "osm",
+    basemap: "streets",
+    // ground: "world-elevation",
+    // basemap: "terrain/base",
   });
+
   return new MapView({
     map: map,
     container: container,
-    center: [55, 25],
+    center: [54.67, 24.33],
     zoom: 13,
   });
 };
@@ -38,7 +47,7 @@ export const MapComponent = (props: IArcMapViewProps) => {
     return () => _view && _view.destroy();
   }, []);
   return (
-    <div className="w-80 h-80" ref={mapRef}>
+    <div className="w-screen h-screen" ref={mapRef}>
       <MapViewContext.Provider value={{ view }}>
         {children}
       </MapViewContext.Provider>

src/components/UnitList.tsx

@@ -0,0 +1,47 @@
+const units = [
+  { id: 1, title: "Entrance", area: "3.25x3.10" },
+  { id: 2, title: "Living Room", area: "4.10x5.10" },
+  { id: 3, title: "Dining Room", area: "5.00x5.00" },
+  { id: 4, title: "Store 1", area: "2.90x1.35" },
+  { id: 5, title: "Men’s Majlas", area: "5.00x7.00" },
+  { id: 6, title: "Bathroom 1", area: "1.70x2.00" },
+  { id: 7, title: "Washbasins", area: "1.80x2.00" },
+  { id: 8, title: "Guest Bedroom", area: "4.10x4.60" },
+  { id: 9, title: "Bathroom 2", area: "2.70x2.00" },
+  { id: 10, title: "Kitchen", area: "5.00x4.00" },
+  { id: 11, title: "Bathroom 3", area: "1.50x2.50" },
+  { id: 12, title: "Store 2", area: "2.20x1.30" },
+  { id: 13, title: "Laundry Room", area: "2.20x1.50" },
+  { id: 14, title: "Domestic Worker Room", area: "3.50x3.00" },
+  { id: 15, title: "Domestic Worker Bathroom", area: "1.50x2.00" },
+];
+
+const UnitList = () => {
+  return (
+    <div className="px-8 py-6">
+      <div className="font-medium text-lg flex w-full gap-[18px] py-2 pr-6 pl-4 ">
+        <div>№</div>
+        <div className="flex justify-between w-full">
+          <div>Unit</div>
+          <div>Area (m)</div>
+        </div>
+      </div>
+      {units.map((unit, index) => (
+        <div
+          key={unit.id}
+          className={`font-medium text-lg flex w-full gap-[18px] py-2 pr-6 pl-4 ${
+            index % 2 === 0 ? "bg-[#F3F2F0] rounded-lg" : ""
+          }`}
+        >
+          <div>{index + 1}</div>
+          <div className="flex justify-between w-full">
+            <div>{unit.title}</div>
+            <div>{unit.area}</div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default UnitList;

src/components/ViewToggle.tsx

@@ -48,7 +48,7 @@ const ViewToggle = ({ offset, isDesktop }: ViewSwitcherProps) => {
           onClick={handleOnFirstClick}
           className={`${
             currentView === 1 ? "bg-black text-white" : ""
-          }  py-2 px-4 w-fit rounded-[32px] `}
+          } py-2 px-4 w-fit rounded-[32px]  `}
         >
           {" "}
           Outdoor

src/components/mobile/Appartment/Parameters.tsx

@@ -15,7 +15,7 @@ const Parameters = () => {
         </div>
         <div className="flex justify-between gap-4">
           <div className="w-1/2 text-sm text-[#666668] font-medium">
-            Plot area
+            Plot area m<sup>2</sup>
           </div>
           <div className="w-1/2 text-sm font-medium">
             {currentVilla && currentVilla.plotArea}
@@ -23,7 +23,7 @@ const Parameters = () => {
         </div>
         <div className="flex justify-between gap-4">
           <div className="w-1/2 text-sm text-[#666668] font-medium">
-            Total Build up Area
+            Unit Area, m<sup>2</sup>
           </div>
           <div className="w-1/2 text-sm font-medium">
             {currentVilla && currentVilla.totalBuildUpArea}

src/components/mobile/Appartment/ViewControllerModal.tsx

@@ -1,15 +1,16 @@
 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 from "./Parameters";
 import LayoutSlider from "./LayoutSlider";
 import ImageSlider from "./ImageSlider";
 import ViewToggle from "../../ViewToggle";
+import UnitList from "../../UnitList";
 
 const ViewControllerModal = () => {
   // const { sliders } = parameters;
   const [offset, setOffset] = useState(1);
+  const [isActive, setIsActive] = useState(false);
   const [isTouchable, setIsTouchable] = useState(true);
   const [scrollY, setScrollY] = useState(0);
 
@@ -24,32 +25,48 @@ const ViewControllerModal = () => {
   const handleOnSwiped = (eventData: SwipeEventData) => {
     if (eventData.dir === "Down") {
       setOffset(1);
+      setIsActive(false);
     }
     if (eventData.dir === "Up") {
       setOffset(0);
+      setIsActive(true);
     }
   };
 
   const handleOnBackClick = () => {
     setOffset(1);
+    setIsActive(false);
   };
 
   const handleOnScroll = (event: React.UIEvent<HTMLDivElement, UIEvent>) => {
     setScrollY(event.currentTarget.scrollTop);
   };
 
+  const handleOnSwiping = (eventData: SwipeEventData) => {
+    const screenHeight = window.innerHeight;
+    if (eventData.dir === "Down" && isActive && offset <= 1) {
+      const offsetDown = eventData.absY / screenHeight;
+      setOffset(() => offsetDown);
+    }
+    if (eventData.dir === "Up" && !isActive && offset >= 0) {
+      const offsetDown = 1 - eventData.absY / screenHeight;
+      setOffset(() => offsetDown);
+    }
+  };
+
   const handlers = useSwipeable({
     onSwiped: handleOnSwiped,
-    preventScrollOnSwipe: offset === 1,
+    onSwiping: handleOnSwiping,
+
+    preventScrollOnSwipe: offset !== 0,
     trackTouch: isTouchable,
   });
 
   return (
-    <div className=" flex flex-col fixed left-0 top-0 z-20 bg-black">
+    <div className="flex flex-col fixed left-0 top-0 z-20" {...handlers}>
       <div
-        {...handlers}
         className={`${
-          offset === 1 ? "rounded-ss-2xl rounded-se-2xl" : ""
+          isActive ? "rounded-ss-2xl rounded-se-2xl" : ""
         } bg-white w-full h-[calc(100vh)] border flex flex-col transition-all duration-500 fixed left-0 top-0 ease-in-out`}
         style={{
           transform: `translateY(calc(${offset * 80}vh))`,
@@ -66,7 +83,9 @@ const ViewControllerModal = () => {
           <LayoutSlider />
           <Parameters />
           <ImageSlider />
+          {/* <UnitList /> */}
         </div>
+
         <div className="px-6 py-4 mt-auto border">
           <button
             className="border flex w-full py-3 justify-center rounded-full"