button panel

src/components/HelpButton.tsx

@@ -0,0 +1,18 @@
+import HelpIcon from "../icons/HelpIcon";
+
+type HelpButtonProps = {
+  handleOnHelpClick: () => void;
+};
+
+const HelpButton = ({ handleOnHelpClick }: HelpButtonProps) => {
+  return (
+    <button
+      className="bg-white border-[#C7BDBA] p-[6px] rounded-full"
+      onClick={handleOnHelpClick}
+    >
+      <HelpIcon />
+    </button>
+  );
+};
+
+export default HelpButton;

src/components/ResizeButton.tsx

@@ -0,0 +1,18 @@
+import ResizeIcon from "../icons/ResizeIcon";
+
+type ResizeButtonProps = {
+  handleOnHelpClick: () => void;
+};
+
+const ResizeButton = ({ handleOnHelpClick }: ResizeButtonProps) => {
+  return (
+    <button
+      className="bg-white border-[#C7BDBA] p-[6px] rounded-full"
+      onClick={handleOnHelpClick}
+    >
+      <ResizeIcon />
+    </button>
+  );
+};
+
+export default ResizeButton;

src/components/mobile/Appartment/ButtonPanel.tsx

@@ -3,6 +3,7 @@ import HelpIcon from "../../../icons/HelpIcon";
 import useStore from "../../../store/store";
 import PopupModal from "./PopupModal";
 import HelpPanel from "./HelpPanel";
+import HelpButton from "../../HelpButton";
 
 const ButtonPanel = () => {
   const { setModal, setPanel } = useStore();
@@ -22,12 +23,13 @@ const ButtonPanel = () => {
             </div>
             Back
           </button>
-          <button
+          <HelpButton handleOnHelpClick={handleOnHelpClick} />
+          {/* <button
             className="bg-white border-[#C7BDBA] p-[6px] rounded-full"
             onClick={handleOnHelpClick}
           >
             <HelpIcon />
-          </button>
+          </button> */}
         </div>
       }
     </>

src/components/mobile/Appartment/ViewToggle.tsx

@@ -34,11 +34,11 @@ const ViewToggle = ({ offset, isDesktop }: ViewSwitcherProps) => {
   return (
     <div
       className={`${
-        isDesktop ? "" : "absolute top-[-51px]"
-      } w-full h-9 px-6 bg`}
+        isDesktop ? "" : "w-full absolute top-[-51px] mx-auto"
+      } h-9 px-6 `}
     >
       <div
-        className={`even bg-white rounded-[32px] flex text-sm justify-center w-fit border-2 transition-all duration-300 ease-in-out mx-auto select-none cursor-pointer`}
+        className={`even bg-white rounded-[32px] flex text-sm justify-center w-fit border-2 transition-all duration-300 ease-in-out  select-none cursor-pointer`}
         style={{
           opacity: offset ? offset : 1,
           pointerEvents: `${offset === 0 ? "none" : "auto"}`,

src/icons/ResizeIcon.tsx

@@ -0,0 +1,19 @@
+const ResizeIcon = () => {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M7 17.5H2.5M2.5 17.5V13M2.5 17.5L7.375 12.625M12.625 7.375L17.5 2.5M17.5 2.5V7M17.5 2.5H13"
+        stroke="#050409"
+        strokeWidth="1.5"
+      />
+    </svg>
+  );
+};
+
+export default ResizeIcon;

src/pages/Desktop/Apartment.tsx

@@ -2,7 +2,7 @@ import { Unity, useUnityContext } from "react-unity-webgl";
 import useStore from "../../store/store";
 import { useEffect } from "react";
 import LoaderModal from "../../components/LoaderModal";
-import ViewToggle from "../../components/mobile/Appartment/ViewToggle";
+import ButtonPanel from "./ButtonPanel";
 import { ReactUnityEventParameter } from "react-unity-webgl/distribution/types/react-unity-event-parameters";
 
 const Apartment = () => {
@@ -53,9 +53,7 @@ const Apartment = () => {
       {loader}
       <div className="pt-[101px] pb-[63px] px-[215px] relative">
         <div className="relative">
-          <div className="absolute top-0 w-full p-4">
-            <ViewToggle isDesktop />
-          </div>
+          <ButtonPanel />
           <Unity
             unityProvider={unityProvider}
             style={{ width: "100%", height: "100%" }}

src/pages/Desktop/ButtonPanel.tsx

@@ -0,0 +1,27 @@
+import HelpButton from "../../components/HelpButton";
+import ResizeButton from "../../components/ResizeButton";
+import ViewToggle from "../../components/mobile/Appartment/ViewToggle";
+
+const ButtonPanel = () => {
+  return (
+    <div className="absolute top-0 w-full p-4 flex justify-between">
+      <div />
+      <ViewToggle isDesktop />
+      {/* <div /> */}
+      <div className="flex gap-2 w-fit">
+        <HelpButton
+          handleOnHelpClick={function (): void {
+            throw new Error("Function not implemented.");
+          }}
+        />
+        <ResizeButton
+          handleOnHelpClick={function (): void {
+            throw new Error("Function not implemented.");
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default ButtonPanel;