changes

src/components/Header.tsx

@@ -0,0 +1,17 @@
+import { Outlet } from "react-router-dom";
+import BackIcon from "../icons/BackIcon";
+
+const Header = () => {
+  return (
+    <>
+      <header className="fixed left-0 top-0 px-2 w-full bg-[#ddd8d5] z-40 h-11 flex items-center justify-between">
+        <BackIcon />
+        <div className="items-center font-medium text-lg">A1M</div>
+        <div></div>
+      </header>
+      {<Outlet />}
+    </>
+  );
+};
+
+export default Header;

src/components/LoaderModal.tsx

@@ -29,7 +29,7 @@ const LoaderModal = () => {
   }, []);
 
   return (
-    <div className="bg-[#F3F2F0] h-full w-full flex justify-center items-center flex-col fixed">
+    <div className="bg-[#F3F2F0] h-full w-full flex justify-center items-center flex-col fixed z-30">
       <LoadingIcon className="animate-spin w-16" />
       <div className="relative h-7 overflow-hidden">
         <div

src/components/ViewController.tsx

@@ -4,16 +4,22 @@ import { Parameters as ParametersType } from "../types/appartment";
 import Parameters from "./Parameters";
 import Slider from "./Slider";
 import { SwipeEventData, useSwipeable } from "react-swipeable";
-import { HandledEvents } from "react-swipeable/es/types";
 
 type ViewControllerProps = {
   parameters: ParametersType;
 };
 
+const apartmentViews = [
+  { id: 1, title: "General View" },
+  { id: 2, title: "Ground Floor" },
+  { id: 3, title: "First Floor" },
+];
+
 const ViewController = ({ parameters }: ViewControllerProps) => {
   const { sliders } = parameters;
-  const [offset, setOffset] = useState(0);
-  const [isScroll, setIsScroll] = useState(false);
+  const [offset, setOffset] = useState(1);
+  const [selectedViewId, setSelectedViewId] = useState(apartmentViews[0].id);
+  //   const [animationFrame, setAnimationFrame] = useState(0)
 
   const handleOnSwiped = (eventData: SwipeEventData) => {
     if (eventData.dir === "Down") {
@@ -30,8 +36,8 @@ const ViewController = ({ parameters }: ViewControllerProps) => {
     setOffset(1);
   };
 
-  const handleOnTouchEnd = ({ event }: { event: HandledEvents }) => {
-    console.log("event", event);
+  const handleOnViewClick = (viewId: number) => {
+    return () => setSelectedViewId(viewId);
   };
 
   const handlers = useSwipeable({
@@ -43,33 +49,69 @@ const ViewController = ({ parameters }: ViewControllerProps) => {
     // onSwiped: () => console.log("first"),
     // onTouchEndOrOnMouseUp: handleOnTouchEnd,
     // swipeDuration: 300,
-    preventScrollOnSwipe: true,
+    // preventScrollOnSwipe: true,
+    // onSwipedDown: (e) => e.preventDefault(),
   });
 
   return (
-    <div
-      className="bg-white w-full h-screen border rounded-ss-2xl rounded-se-2xl flex flex-col transition-all duration-1000 overflow-hidden"
-      style={{
-        transform: `translateY(calc(${offset * 90}vh))`,
-      }}
-      {...handlers}
-    >
-      <div className="mx-auto flex justify-center self-start w-full">
-        <ButtonSwipperIcon />
-      </div>
-      <div className="h-[calc(100vh-110px)] overflow-y-scroll">
-        <Slider sliders={sliders} />
-        <Parameters parameters={parameters} />
-      </div>
-      <div className="px-6 py-3 mt-auto border">
-        <button
-          className="border flex w-full py-3 justify-center rounded-full"
-          onClick={handleOnBackClick}
-        >
-          Back
-        </button>
+    <div className="bg-white flex flex-col transition-all duration-1000 fixed left-0 bottom-28">
+      <div
+        className={`${
+          offset === 1 ? "rounded-ss-2xl rounded-se-2xl" : ""
+        } bg-white w-full h-[calc(100vh)] border flex flex-col transition-all duration-1000 fixed left-0 top-11`}
+        style={{
+          transform: `translateY(calc(${offset * 80}vh))`,
+        }}
+      >
+        <div className="absolute top-[-51px] w-full h-9 px-6 bg">
+          <div
+            className={`even bg-white rounded-[32px] flex text-sm justify-center w-fit border-2 transition-all duration-500 mx-auto`}
+            style={{
+              opacity: offset,
+              pointerEvents: `${offset === 0 ? "none" : "auto"}`,
+            }}
+          >
+            {apartmentViews.map((view) => (
+              <div
+                onClick={handleOnViewClick(view.id)}
+                key={view.id}
+                className={`${
+                  selectedViewId === view.id ? "bg-black text-white" : ""
+                }  py-2 px-4 w-fit rounded-[32px] `}
+              >
+                {" "}
+                {view.title}
+              </div>
+            ))}
+          </div>
+        </div>
+        <div className="mx-auto flex justify-center self-start w-full">
+          <ButtonSwipperIcon />
+        </div>
+        <div className="h-[calc(100vh-110px)] overflow-y-scroll relative">
+          <div
+            className="absolute bg-black z-30 h-[30%] w-full opacity-0"
+            {...handlers}
+          ></div>
+          <Slider sliders={sliders} />
+          <Parameters parameters={parameters} />
+          <div className="flex p-6 gap-2 overflow-x-scroll">
+            {parameters.perspectiveWorkings.map((working) => (
+              <img className="rounded-lg" src={working} alt="" key={working} />
+            ))}
+          </div>
+        </div>
+        <div className="px-6 pt-4 pb-14 mt-auto border">
+          <button
+            className="border flex w-full py-3 justify-center rounded-full"
+            onClick={handleOnBackClick}
+          >
+            Back
+          </button>
+        </div>
       </div>
     </div>
+    // </div>
   );
 };