diff --git a/src/App.js b/src/App.js
index f4b8976..17ae9cc 100644
--- a/src/App.js
+++ b/src/App.js
@@ -34,6 +34,7 @@ import Linux from './Pages/Linux/Linux';
import Footer from './UI/Footer';
import BasicPage from './Pages/BasicPage';
+import Japan from './Japan/Japan';
function App() {
@@ -65,6 +66,7 @@ function App() {
}>
}>
+ }>
diff --git a/src/Japan/Dropdown.js b/src/Japan/Dropdown.js
new file mode 100644
index 0000000..f3dd782
--- /dev/null
+++ b/src/Japan/Dropdown.js
@@ -0,0 +1,18 @@
+import React from 'react';
+
+const Dropdown = ({ selectedColor, handleColorChange }) => {
+ return (
+
+
+
+
+ );
+};
+
+export default Dropdown;
diff --git a/src/Japan/Japan.js b/src/Japan/Japan.js
new file mode 100644
index 0000000..232308b
--- /dev/null
+++ b/src/Japan/Japan.js
@@ -0,0 +1,21 @@
+import React, { useState } from 'react';
+import JapanMap from './JapanMap';
+import Dropdown from './Dropdown';
+
+const Japan = () => {
+ const [selectedColor, setSelectedColor] = useState('');
+
+ const handleColorChange = (event) => {
+ setSelectedColor(event.target.value);
+ };
+
+ return (
+
+
Japan
+
+
+
+ )
+}
+
+export default Japan;
diff --git a/src/Japan/JapanMap.js b/src/Japan/JapanMap.js
new file mode 100644
index 0000000..778034a
--- /dev/null
+++ b/src/Japan/JapanMap.js
@@ -0,0 +1,951 @@
+import React from "react";
+
+function JapanMap({ selection }) {
+
+ const yamagata_fill = selection === "ginzan_onsen" ? "red" : "none";
+ console.log(selection);
+ console.log(yamagata_fill);
+
+ return (
+
+ );
+}
+
+export default JapanMap;