From 66147833ec1c8afee210255d4a184b11545b0511 Mon Sep 17 00:00:00 2001
From: yuiseki <yuiseki@gmail.com>
Date: Sat, 6 Jan 2024 14:54:49 +0900
Subject: [PATCH] add MapStyleSelector

---
 src/app/globals.css                           | 16 +-------
 src/app/page.tsx                              | 38 +++----------------
 .../FloatingActionButton/styles.module.scss   |  9 +++--
 src/components/MapStyleSelector/index.tsx     | 29 ++++++++++++++
 .../MapStyleSelector/styles.module.scss       | 19 ++++++++++
 5 files changed, 60 insertions(+), 51 deletions(-)
 create mode 100644 src/components/MapStyleSelector/index.tsx
 create mode 100644 src/components/MapStyleSelector/styles.module.scss

diff --git a/src/app/globals.css b/src/app/globals.css
index e8e371e1..922eaef5 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -235,20 +235,6 @@ main.tridentMain {
   z-index: 1000;
 }
 
-.tridentMapSelectWrap select {
-  font-size: 1rem;
-  line-height: 1.4;
-  appearance: none;
-  border-radius: 12px;
-  min-height: 20px;
-  margin: 0px;
-  padding: 2px 8px;
-  cursor: pointer;
-  color: rgba(0, 0, 0, 0.8);
-  background-color: white;
-  font-family: sans-serif, emoji;
-}
-
 .tridentAgentArticle,
 .tridentAgentReportListWrap {
   height: 100vh;
@@ -605,7 +591,7 @@ main.tridentMain {
     width: 100%;
     top: 0;
     left: 0;
-    height: 50dvh;
+    height: 100dvh;
   }
   .dialogueElementItem {
     gap: 0px;
diff --git a/src/app/page.tsx b/src/app/page.tsx
index c46e98c3..c9864568 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -16,6 +16,7 @@ import * as turf from "@turf/turf";
 import { TridentMapsStyle } from "@/types/TridentMaps";
 import { useLocalStorage } from "@/hooks/localStorage";
 import { FloatingChatButton } from "@/components/FloatingActionButton";
+import { MapStyleSelector } from "@/components/MapStyleSelector";
 
 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?`;
 
@@ -340,37 +341,10 @@ export default function Home() {
       <title>{pageTitle}</title>
       <main className="tridentMain">
         <div className="tridentMapWrap">
-          <div className="tridentMapSelectWrap">
-            <select
-              style={{
-                position: "absolute",
-                top: 10,
-                left: 10,
-                zIndex: 10000,
-                maxWidth: "250px",
-                textOverflow: "ellipsis",
-              }}
-              value={mapStyleJsonUrl}
-              onChange={onSelectMapStyleJsonUrl}
-            >
-              <option value={"/map_styles/fiord-color-gl-style/style.json"}>
-                🗺 OSM Fiord color (vector)
-              </option>
-              <option
-                value={
-                  "https://tile.openstreetmap.jp/styles/osm-bright/style.json"
-                }
-              >
-                🗺 OSM JP bright (vector)
-              </option>
-              <option value={"/map_styles/osm-hot/style.json"}>
-                🗺 OSM HOT (raster)
-              </option>
-              <option value={"/map_styles/arcgis-world-imagery/style.json"}>
-                🛰 ArcGIS World Imagery (raster)
-              </option>
-            </select>
-          </div>
+          <MapStyleSelector
+            mapStyleJsonUrl={mapStyleJsonUrl}
+            onSelectMapStyleJsonUrl={onSelectMapStyleJsonUrl}
+          />
           <MapProvider>
             <BaseMap
               id="mainMap"
@@ -395,7 +369,7 @@ export default function Home() {
           <FloatingChatButton>
             <div className="logsOuterWrap" ref={dialogueRef}>
               <div className="tridentMapTitle">
-                {mapTitle ? mapTitle : "Untitled"}
+                {mapTitle ? mapTitle : "Untitled Map"}
               </div>
               {dialogueList.map((dialogueElement, dialogueIndex) => {
                 return (
diff --git a/src/components/FloatingActionButton/styles.module.scss b/src/components/FloatingActionButton/styles.module.scss
index 05113bd5..646822b5 100644
--- a/src/components/FloatingActionButton/styles.module.scss
+++ b/src/components/FloatingActionButton/styles.module.scss
@@ -5,7 +5,7 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  align-items: center;
+  align-items: flex-end;
 }
 
 .buttonInnerWrap {
@@ -19,7 +19,7 @@
   align-items: center;
   backdrop-filter: blur(10px);
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
-  margin: 10px 0;
+  margin: 10px;
   z-index: 100000;
 }
 
@@ -41,7 +41,8 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  align-items: center;
+  align-items: flex-end;
+  padding: 10px;
 }
 
 .closeButton {
@@ -51,5 +52,5 @@
   background: transparent;
   background: rgba(5, 5, 5, 0.5);
   border-radius: 50%;
-  margin: 10px 0;
+  margin: 10px;
 }
diff --git a/src/components/MapStyleSelector/index.tsx b/src/components/MapStyleSelector/index.tsx
new file mode 100644
index 00000000..1f3a0490
--- /dev/null
+++ b/src/components/MapStyleSelector/index.tsx
@@ -0,0 +1,29 @@
+import styles from "./styles.module.scss";
+
+export const MapStyleSelector: React.FC<{
+  mapStyleJsonUrl: string;
+  onSelectMapStyleJsonUrl: (e: React.ChangeEvent<HTMLSelectElement>) => void;
+}> = ({ mapStyleJsonUrl, onSelectMapStyleJsonUrl }) => {
+  return (
+    <select
+      className={styles.select}
+      value={mapStyleJsonUrl}
+      onChange={onSelectMapStyleJsonUrl}
+    >
+      <option value={"/map_styles/fiord-color-gl-style/style.json"}>
+        🗺 OSM Fiord color (vector)
+      </option>
+      <option
+        value={"https://tile.openstreetmap.jp/styles/osm-bright/style.json"}
+      >
+        🗺 OSM JP bright (vector)
+      </option>
+      <option value={"/map_styles/osm-hot/style.json"}>
+        🗺 OSM HOT (raster)
+      </option>
+      <option value={"/map_styles/arcgis-world-imagery/style.json"}>
+        🛰 ArcGIS World Imagery (raster)
+      </option>
+    </select>
+  );
+};
diff --git a/src/components/MapStyleSelector/styles.module.scss b/src/components/MapStyleSelector/styles.module.scss
new file mode 100644
index 00000000..e91de651
--- /dev/null
+++ b/src/components/MapStyleSelector/styles.module.scss
@@ -0,0 +1,19 @@
+.select {
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  z-index: 10000;
+  max-width: 250px;
+  text-overflow: ellipsis;
+  font-size: 1rem;
+  line-height: 1.4;
+  appearance: none;
+  border-radius: 12px;
+  min-height: 20px;
+  margin: 0px;
+  padding: 2px 8px;
+  cursor: pointer;
+  color: rgba(0, 0, 0, 0.8);
+  background-color: white;
+  font-family: sans-serif, emoji;
+}