click and show detail as a pop-up

src/views/Home.vue

@@ -1,4 +1,13 @@
 <template>
+
+<div id="app">
+    <router-view />
+    <Popup
+      v-if="popupData"
+      :nearestStructureData="popupData"
+      :onClose="closePopup"
+    />
+  </div>
   
   <searchbar/>
 
@@ -33,6 +42,7 @@
 <script setup>
 
 import searchbar from '@/components/searchbar.vue';
+import Popup from "@/components/Popup.vue"; // Import the Popup componen
 import { ref } from "vue";
 import axios from "axios";
 
@@ -41,23 +51,29 @@ const projection = ref("EPSG:4326");
 const zoom = ref(19);
 const rotation = ref(0);
 
+const popupData = ref(null);
+
+//Show API
 const handleMapClick = async event => {
   const clickedCoordinate = event.coordinate;
-  console.log("Clicked coordinate:", clickedCoordinate);
 
   try {
     const response = await axios.get(
       `https://nominatim.openstreetmap.org/reverse?format=json&lat=${clickedCoordinate[1]}&lon=${clickedCoordinate[0]}`
     );
 
-    console.log("API response:", response.data);
-
     const nearestStructureData = response.data;
-    console.log("Nearest structure:", nearestStructureData);
+    popupData.value = nearestStructureData; // Show popup
+
   } catch (error) {
     console.error("Error fetching reverse geocoding data:", error);
   }
 };
+
+const closePopup = () => {
+  popupData.value = null; // Hide popup
+};
+
 </script>
 
 <style>