upd

client/src/components/Button3.tsx

@@ -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>
   );
 }

client/src/components/FloorPath.tsx

@@ -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"
       }`}
     />
   );

client/src/components/Test/FloorItem.tsx

@@ -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;