click and show detail as a pop-up

src/components/Popup.vue

@@ -0,0 +1,50 @@
+<template>
+  <div v-if="showPopup" class="popup">
+    <div class="popup-content">
+      <p>{{ nearestStructureData.display_name }}</p>
+      <button @click="closePopup">Close</button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    nearestStructureData: Object,
+    onClose: Function,
+  },
+  data() {
+    return {
+      showPopup: true,
+    };
+  },
+  methods: {
+    closePopup() {
+      this.showPopup = false;
+      this.onClose();
+    },
+  },
+};
+</script>
+
+<style scoped>
+.popup {
+  position: fixed;
+  top: 50%; /* Set the popup to be vertically centered */
+  left: 50%; /* Set the popup to be horizontally centered */
+  transform: translate(-50%, -50%); /* Center the popup accurately */
+  background-color: white;
+  border: 1px solid #ccc;
+  padding: 10px;
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+}
+
+.popup-content {
+  margin: 0;
+}
+
+button {
+  margin-top: 10px;
+}
+</style>