From ea225bee20df6d82b0fcad65548c5ef127fff6bd Mon Sep 17 00:00:00 2001
From: yuiseki <yuiseki@gmail.com>
Date: Sat, 6 Jan 2024 13:13:00 +0900
Subject: [PATCH] add FloatingActionButton

---
 .node_version                                 |   2 +-
 package-lock.json                             | 101 ++++++++++++++++++
 package.json                                  |   1 +
 src/app/page.tsx                              |   4 +-
 src/components/BaseMap/index.tsx              |  18 ++--
 src/components/FloatingActionButton/index.tsx |  46 ++++++++
 .../FloatingActionButton/styles.module.scss   |  53 +++++++++
 7 files changed, 214 insertions(+), 11 deletions(-)
 create mode 100644 src/components/FloatingActionButton/index.tsx
 create mode 100644 src/components/FloatingActionButton/styles.module.scss

diff --git a/.node_version b/.node_version
index d5a15960..24c71f3d 100644
--- a/.node_version
+++ b/.node_version
@@ -1 +1 @@
-20.10.0
+21.5.0
diff --git a/package-lock.json b/package-lock.json
index 410ac6b6..f653a651 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -29,6 +29,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",
@@ -4707,6 +4708,18 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/arg": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
@@ -5380,6 +5393,43 @@
         "entities": "^4.4.0"
       }
     },
+    "node_modules/chokidar": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://paulmillr.com/funding/"
+        }
+      ],
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/chrome-trace-event": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
@@ -7539,6 +7589,11 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immutable": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz",
+      "integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA=="
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -7660,6 +7715,17 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-boolean-object": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz",
@@ -9137,6 +9203,14 @@
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.12.tgz",
       "integrity": "sha512-QzsYKWhXTWx8h1kIvqfnC++o0pEmpRQA/aenALsL2F4pqNVr7YzcdMlDij5WBnwftRbJCNJL/O7zdKaxKPHqgQ=="
     },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/npm-run-path": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.1.0.tgz",
@@ -9942,6 +10016,17 @@
         "node": ">= 6"
       }
     },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
     "node_modules/recharts": {
       "version": "2.10.3",
       "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.10.3.tgz",
@@ -10385,6 +10470,22 @@
       "optional": true,
       "peer": true
     },
+    "node_modules/sass": {
+      "version": "1.69.6",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.69.6.tgz",
+      "integrity": "sha512-qbRr3k9JGHWXCvZU77SD2OTwUlC+gNT+61JOLcmLm+XqH4h/5D+p4IIsxvpkB89S9AwJOyb5+rWNpIucaFxSFQ==",
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/scheduler": {
       "version": "0.23.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
diff --git a/package.json b/package.json
index b62e8d91..47df0c50 100644
--- a/package.json
+++ b/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",
diff --git a/src/app/page.tsx b/src/app/page.tsx
index be96e57d..83388ac1 100644
--- a/src/app/page.tsx
+++ b/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>
     </>
diff --git a/src/components/BaseMap/index.tsx b/src/components/BaseMap/index.tsx
index a57e38ea..bf274cee 100644
--- a/src/components/BaseMap/index.tsx
+++ b/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>
   );
 };
diff --git a/src/components/FloatingActionButton/index.tsx b/src/components/FloatingActionButton/index.tsx
new file mode 100644
index 00000000..fa0e516a
--- /dev/null
+++ b/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>
+      )}
+    </>
+  );
+};
diff --git a/src/components/FloatingActionButton/styles.module.scss b/src/components/FloatingActionButton/styles.module.scss
new file mode 100644
index 00000000..f4777615
--- /dev/null
+++ b/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%;
+}