Add Japan page and SVG map.

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() {
             <Route exact path='/pages/linux' element={<Linux />}></Route>
 
             <Route exact path='/pages/basic' element={<BasicPage id="1"/>}></Route>
+            <Route exact path='/japan' element={<Japan />}></Route>
         </Routes>
 
         <Footer />

src/Japan/Dropdown.js

@@ -0,0 +1,18 @@
+import React from 'react';
+
+const Dropdown = ({ selectedColor, handleColorChange }) => { 
+  return (
+    <div>
+      <select value={selectedColor} onChange={handleColorChange}>
+        <option value="">Make selection</option>
+        <option value="ginzan_onsen">Ginzan Onsen</option>
+        <option value="shuri_castle">Shuri Castle</option>
+        <option value="itsukushima_shrine">Itsukushima Shrine</option>
+        <option value="sendai_daikannon">Sendai Daikannon</option>
+      </select>
+      <br />
+    </div>
+  );
+};
+
+export default Dropdown;

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 (        
+        <div className='row'>
+            <h1>Japan</h1>
+            <Dropdown selectedColor={selectedColor} handleColorChange={handleColorChange} />
+            <JapanMap selection={selectedColor} />
+        </div>
+    )
+}
+
+export default Japan;