add FloatingActionButton

.node_version

@@ -1 +1 @@
-20.10.0
+21.5.0

package.json

@@ -39,6 +39,7 @@
     "react-map-gl": "^7.0.25",
     "react-particles": "^2.12.2",
     "recharts": "^2.8.0",
+    "sass": "^1.69.6",
     "swr": "^2.2.4",
     "ts-md5": "^1.3.1",
     "tsparticles": "^2.12.0",

src/app/page.tsx

@@ -15,6 +15,7 @@ import osmtogeojson from "osmtogeojson";
 import * as turf from "@turf/turf";
 import { TridentMapsStyle } from "@/types/TridentMaps";
 import { useLocalStorage } from "@/hooks/localStorage";
+import { FloatingChatButton } from "@/components/FloatingActionButton";
 
 const greetings = `Hello! I'm TRIDENT, interactive Smart Maps assistant. Could you indicate me the areas and themes you want to see as the map?`;
 
@@ -385,7 +386,7 @@ export default function Home() {
             <select
               style={{
                 position: "absolute",
-                bottom: 10,
+                top: 10,
                 left: 10,
                 zIndex: 10000,
                 maxWidth: "250px",
@@ -433,6 +434,7 @@ export default function Home() {
                 })}
             </BaseMap>
           </MapProvider>
+          <FloatingChatButton>test</FloatingChatButton>
         </div>
       </main>
     </>

src/components/BaseMap/index.tsx

@@ -88,24 +88,24 @@ export const BaseMap: React.FC<{
       dragPan={enableInteractions ? true : false}
     >
       {children}
+      <AttributionControl
+        position={
+          attributionPosition
+            ? (attributionPosition as ControlPosition)
+            : "top-right"
+        }
+      />
       {enableInteractions && (
         <>
-          <GeolocateControl position="bottom-right" />
+          <GeolocateControl position="top-right" />
           <NavigationControl
-            position="bottom-right"
+            position="top-right"
             visualizePitch={true}
             showZoom={true}
             showCompass={true}
           />
         </>
       )}
-      <AttributionControl
-        position={
-          attributionPosition
-            ? (attributionPosition as ControlPosition)
-            : "bottom-right"
-        }
-      />
     </Map>
   );
 };

src/components/FloatingActionButton/index.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { useState } from "react";
+import styles from "./styles.module.scss";
+
+export const FloatingChatButton: React.FC<{
+  children: React.ReactNode;
+}> = ({ children }) => {
+  const [showing, setShowing] = useState(false);
+  return (
+    <>
+      {!showing && (
+        <div className={styles.buttonOuterWrap}>
+          <div className={styles.buttonInnerWrap}>
+            <button
+              className={styles.button}
+              onClick={() => {
+                setShowing(true);
+              }}
+            >
+              <img
+                className={styles.buttonImage}
+                src="https://i.gyazo.com/d597c2b08219ea88a211cf98859d9265.png"
+                alt="button"
+                title="button"
+              />
+            </button>
+          </div>
+        </div>
+      )}
+      {showing && (
+        <div className={styles.childrenWrap}>
+          <div>{children}</div>
+          <button
+            className={styles.closeButton}
+            onClick={() => {
+              setShowing(false);
+            }}
+          >
+            ✖
+          </button>
+        </div>
+      )}
+    </>
+  );
+};

src/components/FloatingActionButton/styles.module.scss

@@ -0,0 +1,53 @@
+.buttonOuterWrap {
+  width: 400px;
+  max-width: 100vw;
+  position: absolute;
+  bottom: 0px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.buttonInnerWrap {
+  z-index: 1000;
+  width: 50px;
+  height: 50px;
+  background-color: rgba(0, 158, 219, 0.6) !important;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  backdrop-filter: blur(10px);
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
+}
+
+.button {
+  border: none;
+  background: transparent;
+}
+
+.buttonImage {
+  width: 30px;
+  height: 30px;
+}
+
+.childrenWrap {
+  width: 400px;
+  max-width: 100vw;
+  position: absolute;
+  bottom: 0px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.closeButton {
+  width: 30px;
+  height: 30px;
+  border: none;
+  background: transparent;
+  background: rgba(5, 5, 5, 0.5);
+  border-radius: 50%;
+}