added help to barahkhadi page

Author: Ciphrox

src/pages/barahkhadi/index.astro

@@ -4,6 +4,7 @@ import "@/assets/styles/barahkhadi/index.css";
 
 import { hindiConsonants } from "@/utils/common";
 import { matras } from "@/utils/common";
+import Help from "@/components/Help.astro";
 
 const consonants = [
   hindiConsonants.slice(0, 5), // क, ख, ग, घ, ङ
@@ -16,30 +17,10 @@ const consonants = [
 ];
 ---
 
-<script>
-  document.querySelectorAll(".quick-view-btn").forEach((button) => {
-    button.addEventListener("click", (e) => {
-      // Close all other open popovers
-      document.querySelectorAll('.consonant-card[data-active="true"]').forEach((card) => {
-        if (card !== (e.currentTarget as HTMLElement).closest(".consonant-card")) {
-          // Don't reset current card
-          const btn = card.querySelector(".quick-view-btn") as HTMLElement;
-          card.setAttribute("data-active", "false");
-          btn.textContent = "🔍";
-        }
-      });
-
-      // Toggle current popover
-      const card = (e.currentTarget as HTMLElement).closest(".consonant-card") as HTMLElement;
-      const isActive = card.getAttribute("data-active") === "true";
-      const newState = !isActive;
-      card.setAttribute("data-active", String(newState));
-      (e.currentTarget as HTMLElement).textContent = newState ? "✖️" : "🔍";
-    });
-  });
-</script>
-
 <BaseLayout meta={{ title: "Barahkhadi" }}>
+  <Fragment slot="header-left">
+    <Help title="Barahkhadi" description="This page displays the Hindi consonants and their variations." />
+  </Fragment>
   <div class="container__barahkhadi">
     <div class="consonants-rows">
       {
@@ -68,3 +49,26 @@ const consonants = [
     </div>
   </div>
 </BaseLayout>
+
+<script>
+  document.querySelectorAll(".quick-view-btn").forEach((button) => {
+    button.addEventListener("click", (e) => {
+      // Close all other open popovers
+      document.querySelectorAll('.consonant-card[data-active="true"]').forEach((card) => {
+        if (card !== (e.currentTarget as HTMLElement).closest(".consonant-card")) {
+          // Don't reset current card
+          const btn = card.querySelector(".quick-view-btn") as HTMLElement;
+          card.setAttribute("data-active", "false");
+          btn.textContent = "🔍";
+        }
+      });
+
+      // Toggle current popover
+      const card = (e.currentTarget as HTMLElement).closest(".consonant-card") as HTMLElement;
+      const isActive = card.getAttribute("data-active") === "true";
+      const newState = !isActive;
+      card.setAttribute("data-active", String(newState));
+      (e.currentTarget as HTMLElement).textContent = newState ? "✖️" : "🔍";
+    });
+  });
+</script>