upd

2024-08-30 19:11:32 +05:00
parent 1f0708f2d3
commit 5c0a7db5fd
6 changed files with 209 additions and 98 deletions
@@ -1,10 +1,13 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
  <head>
    <script src="https://static.zohocdn.com/zohocrm/v6.0/sdk/2.0.0/zohocrmsdk-6-0.js"></script>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
+    />
    <title>IRTH</title>
  </head>
  <body>
@@ -11,7 +11,7 @@ interface Props {

 const variantClasses = {
  primary: "bg-[#00BED7] text-white hover:bg-[#0AB3C9]",
-  secondary: "bg-white hover:text-[#0D1922]",
+  secondary: "bg-white hover:text-[#0D1922] ring-1 ring-[#E2E2DC] ring-inset",
 };

 const sizeClasses = {
@@ -46,7 +46,7 @@ function Button3({
      onClick={onClick}
    >
      {icon}
-      <span className="h-[18px]">{children}</span>
+      <span>{children}</span>
    </button>
  );
 }
@@ -4,8 +4,8 @@ function FloorPath(props: SVGProps<SVGPathElement> & { selected: boolean }) {
  return (
    <path
      {...props}
-      className={` hover:fill-[#00bed7]/50 transition-[fill] cursor-pointer ${
-        props.selected ? "fill-[#00bed7]/50" : "fill-[#00bed7]/25"
+      className={` hover:fill-[#00bed7]/70 transition-[fill] cursor-pointer max-sm:pointer-events-none ${
+        props.selected ? "fill-[#00bed7]/70" : "fill-[#00bed7]/20"
      }`}
    />
  );
@@ -0,0 +1,55 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { useEffect, useRef, useState } from "react";
+
+interface Props {
+  floor: string;
+  onSelected: () => void;
+}
+
+function FloorItem({ floor, onSelected }: Props) {
+  const [selected, setSelected] = useState(false);
+  //   const [ref, entry] = useIntersectionObserver({
+  //     threshold: 0,
+  //     root: document.querySelector("#test"),
+  //     rootMargin: "0px",
+  //   });
+
+  //   console.log(document.querySelector("#test"));
+
+  //   useEffect(() => {
+  //     if (!entry?.isIntersecting) return;
+
+  //     onSelected();
+  //   }, [entry?.isIntersecting]);
+
+  const ref = useRef<HTMLParagraphElement>(null);
+
+  useEffect(() => {
+    const test = document.querySelector("#test")!.getBoundingClientRect();
+
+    setInterval(() => {
+      if (
+        ref.current!.getBoundingClientRect().x >= test!.left &&
+        ref.current!.getBoundingClientRect().x <= test!.right
+      ) {
+        onSelected();
+        setSelected(true);
+      } else {
+        setSelected(false);
+      }
+    }, 0);
+  }, []);
+
+  return (
+    <p
+      ref={ref}
+      className={`snap-center w-4 h-4 flex items-center justify-center text-xs font-semibold transition-[color,transform] ${
+        selected ? "text-[#00BED7] scale-125" : ""
+      }`}
+    >
+      {floor}
+    </p>
+  );
+}
+
+export default FloorItem;
@@ -374,3 +374,7 @@ body {
  transform: translateX(100%);
  opacity: 0;
 }
+
+#floors::-webkit-scrollbar {
+  display: none;
+}
@@ -9,6 +9,8 @@ import InfoIcon from "../components/icons/InfoIcon";
 import Header from "../components/Header";
 import { useNavigate } from "react-router-dom";
 import ArrowRightIcon from "../components/icons/ArrowRightIcon";
+import FloorItem from "../components/Test/FloorItem";
+import { isMobile } from "react-device-detect";

 const floors = [
  "5",
@@ -52,6 +54,8 @@ function Test2Page() {
  const navigate = useNavigate();
  const [hoveredWing, setHoveredWing] = useState<string>();
  const [selectedIndex, setSelectedIndex] = useState<number>(0);
+  const [selectedFloor, setSelectedFloor] = useState<string>();
+  // const rootRef = useRef<HTMLElement>(null);\

  function handleResize() {
    if (window.innerHeight > window.innerWidth) {
@@ -69,19 +73,19 @@ function Test2Page() {
  }

  function handleMouseEnter(e: React.MouseEvent<SVGPathElement>) {
-    console.log(e);
+    if (!e.currentTarget.dataset["wing"]) return;
+
    setSelectedFloorPath(e.currentTarget);
    setHoveredWing(e.currentTarget.dataset["wing"]);
    setShowPopup(true);
  }

-  function handleMouseLeave(e: React.MouseEvent<SVGPathElement>) {
-    console.log(e);
+  function handleMouseLeave() {
    setShowPopup(false);
  }

  function handleClick(e: React.MouseEvent<SVGPathElement>) {
-    setSelectedWing(e.currentTarget.dataset["wing"]);
+    setSelectedFloor(e.currentTarget.dataset["floor"]);
  }

  function prev() {
@@ -116,37 +120,12 @@ function Test2Page() {
  }, [selectedIndex]);

  return (
-    <div className="relative overflow-hidden" onMouseMove={handleMouseMove}>
-      {/* <div className="absolute h-14 w-full bg-white z-10 p-4 flex gap-4">
-        <Button2 size="small" onClick={() => setSelectedSide("left")}>
-          Left
-        </Button2>
-        <Button2 size="small" onClick={() => setSelectedSide("right")}>
-          Right
-        </Button2>
-        <Button2 size="small" onClick={() => setSelectedSide(undefined)}>
-          None
-        </Button2>
-      </div> */}
+    <div
+      className="relative h-dvh overflow-hidden"
+      onMouseMove={handleMouseMove}
+    >
      <Header />

-      <Transition in={!!selectedWing} timeout={300} mountOnEnter unmountOnExit>
-        {(state) => (
-          <div
-            className={`absolute top-0 h-screen bg-white right-0 sm:w-1/2 z-10 transition-all duration-300 ${state}`}
-          >
-            <div className="mt-14 overflow-auto">
-              <p>
-                Nulla, explicabo debitis! Quod, natus. Quaerat fuga, distinctio
-                porro laboriosam dolores aliquam similique magni deleniti
-                quibusdam omnis nam. Odit ut tempore porro, sequi iste fugit.
-                Sunt consequatur magnam ducimus quibusdam!
-              </p>
-            </div>
-          </div>
-        )}
-      </Transition>
-
      <div
        className={`absolute z-10 bg-white rounded-2xl w-[344px] transition-[opacity,transform] duration-300 p-6 space-y-4 pointer-events-none ${
          selectedFloorPath?.dataset["wing"] === "West"
@@ -246,9 +225,9 @@ function Test2Page() {
            <Button3
              variant="secondary"
              icon={<InfoIcon />}
-              onClick={() => navigate("/about-project")}
+              onClick={() => navigate("/about-projects")}
            >
-              About Project
+              About Projects
            </Button3>
          </div>
        </div>
@@ -257,12 +236,10 @@ function Test2Page() {
      <div
        className="transition-all duration-300"
        style={{
-          transform: `translateX(${selectedWing ? -25 : 0}%)`,
+          transform: `translateX(${selectedFloor ? -25 : 0}%)`,
        }}
      >
-        <div
-          className={`h-screen ${scaled ? "scale-150 -translate-x-[1%]" : ""}`}
-        >
+        <div className={`h-dvh ${scaled ? "scale-150 -translate-x-[1%]" : ""}`}>
          <img
            ref={ref}
            src="/images/sequenceWing.jpg"
@@ -275,77 +252,149 @@ function Test2Page() {
              viewBox={`0 0 ${imageWidth} ${imageHeight}`}
              preserveAspectRatio="xMidYMid slice"
            >
-              {paths.map((path, index) => (
-                <FloorPath
-                  key={index}
-                  {...path}
-                  selected={
-                    path["data-wing"] && path["data-floor"]
-                      ? path["data-wing"] === hoveredWing &&
-                        path["data-floor"] === hoveredFloor
-                      : false
-                  }
-                  onMouseEnter={handleMouseEnter}
-                  onMouseLeave={handleMouseLeave}
-                  onClick={handleClick}
-                />
-              ))}
+              {!isMobile ? (
+                paths.map((path, index) => (
+                  <FloorPath
+                    key={index}
+                    {...path}
+                    selected={
+                      path["data-wing"] && path["data-floor"]
+                        ? path["data-wing"] === hoveredWing &&
+                          path["data-floor"] === hoveredFloor
+                        : false
+                    }
+                    onMouseEnter={handleMouseEnter}
+                    onMouseLeave={handleMouseLeave}
+                    onClick={handleClick}
+                  />
+                ))
+              ) : (
+                <>
+                  <g
+                    className={`transition-opacity duration-300 ${
+                      selectedWing
+                        ? "opacity-100"
+                        : "opacity-0 pointer-events-none"
+                    }`}
+                  >
+                    {paths
+                      .filter((path) => path["data-wing"] === selectedWing)
+                      .map((path, index) => (
+                        <FloorPath
+                          key={index}
+                          {...path}
+                          selected={
+                            path["data-wing"] && path["data-floor"]
+                              ? path["data-wing"] === selectedWing &&
+                                path["data-floor"] === hoveredFloor
+                              : false
+                          }
+                          onMouseEnter={handleMouseEnter}
+                          onMouseLeave={handleMouseLeave}
+                          onClick={handleClick}
+                        />
+                      ))}
+                  </g>
+                  <g
+                    className={`transition-opacity duration-300 ${
+                      selectedWing
+                        ? "opacity-0 pointer-events-none"
+                        : "opacity-100"
+                    }`}
+                  >
+                    <path
+                      d="M1441.29,1493.16v23.81l-.29,1034.35h0v24.45c0,1.73,1.11,3.26,2.76,3.8l138.35,45.23c.76.25,1.57.27,2.34.04l316.3-90.81c.23-.06.46-.11.7-.13l58.15-5.9,3.6-.53.29-1015.83c0-2.21-1.79-4-4-4h-58.11l-321.31-34.62c-.3-.03-.6-.03-.9.01l-134.36,16.16c-2.01.24-3.52,1.94-3.52,3.97Z"
+                      className={`fill-[#00bed7]/20`}
+                      onClick={() => setSelectedWing("East")}
+                    />
+                    <path
+                      d="M2446,1515.51v-25.79c0-2.13-1.68-3.89-3.81-3.99l-136.64-6.53c-.32-.02-.64.01-.96.07l-28.81,5.68-249.29,22.69h-59c-2.21,0-4,1.79-4,4l-.29,1015.83,3.81.34,58.82,2.71c.25.01.5.04.74.1l248.44,59.2c.36.09.71.23,1.04.41l23.43,13.25c.75.43,1.62.6,2.48.49l140.27-18.21c1.99-.26,3.48-1.96,3.48-3.97v-24.64l.29-1041.64Z"
+                      className={`fill-[#00bed7]/20`}
+                      onClick={() => setSelectedWing("West")}
+                    />
+                  </g>
+                </>
+              )}
            </svg>
          </svg>
        </div>
      </div>

-      <div className="sm:hidden absolute bottom-0 w-full p-3 bg-white">
-        <div className=" rounded-2xl flex">
-          <Button3 onClick={() => setHoveredWing("East")}>East</Button3>
-          <Button3 onClick={() => setHoveredWing("West")}>West</Button3>
-        </div>
-        <div className="relative overflow-hidden px-4 py-2 ">
-          <div className="relative px-12 pt-2.5 pb-[18px] border-b border-[#E2E2DC] overflow-hidden">
+      <div
+        className={`sm:hidden absolute bottom-0 w-full p-3 transition-opacity duration-300 ${
+          selectedWing ? "opacity-100" : "opacity-0 pointer-events-none"
+        }`}
+      >
+        <div className="relative bg-white rounded-lg px-4 pt-2 pb-4 space-y-3">
+          <div className="relative overflow-hidden">
            <div
-              className="flex gap-4 transition-transform mx-12"
-              style={{
-                transform: `translateX(calc(50% - 16px - ${
-                  selectedIndex * 32
-                }px)`,
-              }}
+              id="test"
+              className="absolute top-[calc(50%-16px)] left-[calc(50%-16px)] w-8 h-6"
+            ></div>
+            <div
+              id="floors"
+              className="relative flex gap-4 overflow-x-auto px-[calc(50%)] pt-2.5 pb-[18px] snap-x snap-mandatory"
            >
-              {floors.map((value, index) => (
-                <div
-                  key={index}
-                  className={`min-w-4 w-4 min-h-4 h-4 flex items-center justify-center transition-all ${
-                    selectedIndex === index ? "font-semibold" : ""
-                  }`}
-                >
-                  {value}
-                </div>
+              {floors.map((floor) => (
+                <FloorItem
+                  floor={floor}
+                  onSelected={() => setHoveredFloor(floor)}
+                />
              ))}
            </div>
-            <div className="absolute top-0 left-0 w-full h-full bg-gradient-to-r from-white via-transparent to-white "></div>
+            <div className="absolute top-0 left-0 w-full h-full pointer-events-none bg-gradient-to-r from-white via-transparent to-white"></div>
+            <div className="absolute top-0 left-0 w-full flex justify-between pointer-events-none">
+              <Button3
+                variant="secondary"
+                icon={<ArrowLeftIcon className="w-4 h-4" />}
+                onlyIcon
+                className="ring-0 w-9 h-9"
+              />
+              <Button3
+                variant="secondary"
+                icon={<ArrowRightIcon className="w-4 h-4" />}
+                onlyIcon
+                className="ring-0 w-9 h-9"
+              />
+            </div>
          </div>

-          {selectedIndex !== 0 && (
+          <div className="flex gap-2">
            <Button3
              variant="secondary"
              size="small"
-              icon={<ArrowLeftIcon />}
-              onlyIcon
-              className="absolute top-2 left-2"
-              onClick={prev}
-            />
-          )}
-          {selectedIndex !== floors.length - 1 && (
+              icon={<ArrowLeftIcon className="w-4 h-4" />}
+              className="w-full"
+              onClick={() => setSelectedWing(undefined)}
+            >
+              Back
+            </Button3>
            <Button3
-              variant="secondary"
              size="small"
-              icon={<ArrowRightIcon className="w-5 h-5" />}
-              onlyIcon
-              className="absolute top-2 right-2"
-              onClick={next}
-            />
-          )}
+              icon={<ArrowRightIcon className="w-4 h-4" />}
+              className="w-full flex-row-reverse"
+              onClick={() => setSelectedFloor(hoveredFloor)}
+            >
+              Explore
+            </Button3>
+          </div>
        </div>
      </div>
+
+      <Transition in={!!selectedFloor} timeout={300} mountOnEnter unmountOnExit>
+        {(state) => (
+          <div
+            className={`absolute top-0 h-dvh bg-white right-0 sm:w-1/2 w-full z-10 transition-all duration-300 ${state}`}
+          >
+            <div className="mt-14 overflow-auto">
+              <Button3 size="small" onClick={() => setSelectedFloor(undefined)}>
+                Close
+              </Button3>
+              <p>{selectedFloor}</p>
+            </div>
+          </div>
+        )}
+      </Transition>
    </div>
  );
 }