From e1e8f98f9813e46531223d0bc1178e9958a57439 Mon Sep 17 00:00:00 2001
From: Aditya Singh <adityakumarsingh710@gmail.com>
Date: Mon, 13 Jan 2025 16:48:22 +0530
Subject: [PATCH] made changes in popup component

---
 src/components/Popup.astro | 231 ++++++++++++++++++-------------------
 1 file changed, 110 insertions(+), 121 deletions(-)

diff --git a/src/components/Popup.astro b/src/components/Popup.astro
index 05c75af..22f9e4f 100644
--- a/src/components/Popup.astro
+++ b/src/components/Popup.astro
@@ -1,26 +1,24 @@
----
----
-
-<div id="state-popup">
-  <span class="close-popup">&times;</span>
-  <div id="popup-state-name">State Name</div>
-  <img id="popup-state-image" src="" alt="State Image">
-  <div id="popup-state-info">State Information</div>
-  <div id="pop-up-buttons">
-    <button class="copy-button">Copy Info</button>
-    <button id="see-more-button">See More</button>
+<!-- HTML Structure -->
+<div class="state-popup">
+  <span class="state-popup__close">&times;</span>
+  <div class="state-popup__name">State Name</div>
+  <img class="state-popup__image" src="" alt="State Image">
+  <div class="state-popup__info">State Information</div>
+  <div class="state-popup__buttons">
+    <button class="state-popup__button state-popup__button--copy">Copy Info</button>
+    <button class="state-popup__button state-popup__button--more">See More</button>
   </div>
 </div>
 
 <script>
-  // Initialize DOM elements once
-  const popup = document.getElementById('state-popup') as HTMLElement;
-  const popupStateName = document.getElementById('popup-state-name') as HTMLElement;
-  const popupStateInfo = document.getElementById('popup-state-info') as HTMLElement;
-  const popupStateImage = document.getElementById('popup-state-image') as HTMLElement;
-  const seeMoreButton = document.getElementById('see-more-button') as HTMLElement;
-  const closePopup = document.querySelector('.close-popup') as HTMLElement;
-  const copyButton = document.querySelector('.copy-button') as HTMLElement;
+  // Initialize DOM elements using classes
+  const popup = document.querySelector('.state-popup') as HTMLElement;
+  const popupStateName = document.querySelector('.state-popup__name') as HTMLElement;
+  const popupStateInfo = document.querySelector('.state-popup__info') as HTMLElement;
+  const popupStateImage = document.querySelector('.state-popup__image') as HTMLElement;
+  const seeMoreButton = document.querySelector('.state-popup__button--more') as HTMLElement;
+  const closePopup = document.querySelector('.state-popup__close') as HTMLElement;
+  const copyButton = document.querySelector('.state-popup__button--copy') as HTMLElement;
 
   function showPopup(event: MouseEvent, stateInfo: any) {
     // Update popup content
@@ -29,11 +27,9 @@
     popupStateImage.src = `/map_assets/images/${stateInfo.image}`; 
     popupStateImage.alt = `${stateInfo.name} state image`;
 
-  
     const viewportWidth = window.innerWidth;
     const viewportHeight = window.innerHeight;
 
-
     popup.style.display = 'flex';
     const popupWidth = popup.offsetWidth;
     const popupHeight = popup.offsetHeight;
@@ -42,11 +38,9 @@
     const clickX = event.clientX;
     const clickY = event.clientY;
 
-
     let left = clickX;
     let top = clickY + 20; 
 
-   
     if (left + popupWidth > viewportWidth - 20) {
       left = viewportWidth - popupWidth - 20;
     }
@@ -54,7 +48,6 @@
       left = 20;
     }
 
-
     if (top + popupHeight > viewportHeight - 20) {
       top = clickY - popupHeight - 20;
     }
@@ -62,7 +55,6 @@
       top = 20;
     }
 
-
     popup.style.left = `${left}px`;
     popup.style.top = `${top}px`;
     popup.style.opacity = '1';
@@ -111,107 +103,104 @@
 </script>
 
 <style>
-  #state-popup {
-  display: none;
-  flex-direction: column;
-  position: absolute;
-  background-color: #fff;
-  padding: 20px;
-  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
-  border-radius: 12px;
-  width: 90%;
-  max-width: 400px;
-  z-index: 1000;
-  opacity: 0;
-  transition: opacity 0.3s ease;
-  max-height: 90vh;
-  overflow-y: auto;
-}
-
-#popup-state-name {
-  font-size: 1.8rem;
-  font-weight: bold;
-  margin-bottom: 12px;
-  color: #333;
-}
-
-#popup-state-info {
-  font-size: 1.4rem;
-  margin: 12px 0;
-  color: #444;
-  line-height: 1.4;
-}
-
-#state-popup img {
-  width: 100%;
-  height: auto;
-  max-height: 200px;
-  object-fit: cover;
-  border-radius: 8px;
-  margin: 10px 0;
-}
-
-.close-popup {
-  position: absolute;
-  top: 10px;
-  right: 15px;
-  font-size: 1.8rem;
-  cursor: pointer;
-  color: #666;
-  transition: color 0.2s ease;
-}
-
-.close-popup:hover {
-  color: #333;
-}
-
-#pop-up-buttons {
-  display: flex;
-  gap: 12px;
-  margin-top: 15px;
-}
-
-.copy-button,
-#see-more-button {
-  flex: 1;
-  padding: 10px 16px;
-  font-size: 1.2rem;
-  cursor: pointer;
-  border: none;
-  border-radius: 8px;
-  transition: all 0.2s ease;
-}
-
-.copy-button {
-  background-color: #4caf50;
-  color: white;
-}
-
-#see-more-button {
-  background-color: #007bff;
-  color: white;
-}
-
-.copy-button:hover,
-#see-more-button:hover {
-  transform: translateY(-2px);
-  opacity: 0.9;
-}
-
-@media (max-width: 768px) {
-  #state-popup {
-    width: 85%;
-    padding: 15px;
-    margin: 0 auto;
+  .state-popup {
+    display: none;
+    flex-direction: column;
+    position: absolute;
+    background-color: #fff;
+    padding: 20px;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
+    border-radius: 12px;
+    width: 90%;
+    max-width: 400px;
+    z-index: 1000;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    max-height: 90vh;
+    overflow-y: auto;
+  }
+
+  .state-popup__name {
+    font-size: 1.8rem;
+    font-weight: bold;
+    margin-bottom: 12px;
+    color: #333;
+  }
+
+  .state-popup__info {
+    font-size: 1.4rem;
+    margin: 12px 0;
+    color: #444;
+    line-height: 1.4;
+  }
+
+  .state-popup__image {
+    width: 100%;
+    height: auto;
+    max-height: 200px;
+    object-fit: cover;
+    border-radius: 8px;
+    margin: 10px 0;
+  }
+
+  .state-popup__close {
+    position: absolute;
+    top: 10px;
+    right: 15px;
+    font-size: 1.8rem;
+    cursor: pointer;
+    color: #666;
+    transition: color 0.2s ease;
+  }
+
+  .state-popup__close:hover {
+    color: #333;
   }
 
-  #popup-state-name {
-    font-size: 1.6rem;
+  .state-popup__buttons {
+    display: flex;
+    gap: 12px;
+    margin-top: 15px;
   }
 
-  #popup-state-info {
+  .state-popup__button {
+    flex: 1;
+    padding: 10px 16px;
     font-size: 1.2rem;
+    cursor: pointer;
+    border: none;
+    border-radius: 8px;
+    transition: all 0.2s ease;
+  }
+
+  .state-popup__button--copy {
+    background-color: #4caf50;
+    color: white;
+  }
+
+  .state-popup__button--more {
+    background-color: #007bff;
+    color: white;
+  }
+
+  .state-popup__button:hover {
+    transform: translateY(-2px);
+    opacity: 0.9;
   }
-}
 
+  @media (max-width: 768px) {
+    .state-popup {
+      width: 85%;
+      padding: 15px;
+      margin: 0 auto;
+    }
+
+    .state-popup__name {
+      font-size: 1.6rem;
+    }
+
+    .state-popup__info {
+      font-size: 1.2rem;
+    }
+  }
 </style>
\ No newline at end of file