Updated Varnmala Page UI

Author: Ciphrox

src/assets/styles/alphabet.css

@@ -1,15 +1,25 @@
 .container__alphabet {
+  padding: 1rem;
   display: grid;
   grid-gap: 4px;
   container-type: inline-size;
   container-name: layout;
   font-family: "atkinson";
 
+  & h1 {
+    font-size: 2rem;
+    text-align: center;
+    border: 1px solid var(--border);
+    border-radius: 1rem;
+    background: var(--background);
+    padding: 1rem;
+  }
+
   & .list {
     display: grid;
-    grid-gap: 4px;
-    grid-template-columns: repeat(5, 1fr);
-    margin-block: 1rem;
+    grid-gap: 1rem;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    margin-block: 1.5rem;
 
     & .letter {
       display: grid;
@@ -19,19 +29,31 @@
       color: var(--text, grey);
       border: 2px solid var(--bc);
       border-radius: 0.5rem;
-      box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
+      box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
       padding: 0.5rem;
       height: fit-content;
+      transition: transform 0.2s ease, box-shadow 0.2s ease;
+      background: var(--background);
+
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+      }
 
       & p {
-        font-size: clamp(1.5rem, 5vw, 5rem);
+        font-size: clamp(2rem, 4vw, 4rem);
         text-align: center;
         width: 100%;
+        margin: 0.5rem 0;
       }
 
       & .code {
         cursor: pointer;
-        font-size: small;
+        font-size: 1rem;
+        color: var(--primary);
+        padding: 0.25rem 0.5rem;
+        border-radius: 0.25rem;
+        background: var(--background-alt);
       }
 
       ::selection {
@@ -52,4 +74,8 @@
     color: black;
     font-size: max(1.5em, 1.23em + 2cqi);
   }
+
+  .letter p {
+    font-size: clamp(1.5rem, 3vw, 2.5rem) !important;
+  }
 }

src/assets/styles/varnmala.css

@@ -0,0 +1,41 @@
+.container__varnmala {
+  & .tabs {
+    position: sticky;
+    top: var(--header-height);
+    z-index: 10;
+    padding: 1rem;
+    width: fit-content;
+    border: 1px solid var(--border);
+    border-radius: 1rem;
+    background: var(--background);
+    display: flex;
+    gap: 1rem;
+    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+  }
+
+  & .tab {
+    padding: 0.5rem 2rem;
+    font-size: 1.2rem;
+    border-bottom: 2px solid transparent;
+    transition: all 0.2s ease;
+    position: relative;
+    background: var(--background-alt);
+    border-radius: 0.5rem;
+
+    &:hover {
+      background: var(--background-hover);
+    }
+  }
+
+  & .tab.active {
+    color: var(--primary);
+    border-bottom-color: var(--primary);
+    background: var(--primary);
+    color: var(--background);
+  }
+
+  #english,
+  & #hindi {
+    scroll-margin-top: calc(var(--header-height) + 80px);
+  }
+}

src/components/Letter.astro

@@ -11,15 +11,6 @@ const {
 ---
 
 <div class="letter">
-  <p>{letter}</p>
-  <p data-id="tgt" class="code">{code}</p>
-</div>
-
-<script>
-  const tgt = document.querySelectorAll("[data-id]");
-  tgt?.forEach((elm) =>
-    elm.addEventListener("click", (e: any) => {
-      console.log("Hello, on client", e?.target?.textContent);
-    })
-  );
-</script>
+  <p class="character">{letter}</p>
+  <p data-id="tgt" class="code" title="Click to copy">{code}</p>
+</div>

src/pages/varnmala.astro

@@ -1,5 +1,6 @@
 ---
 import Alphabet from "@/components/Alphabet.astro";
+import "@/assets/styles/varnmala.css";
 import Help from "@/components/Help.astro";
 import BaseLayout from "@/layouts/Base";
 import { varnmala_english, varnmala_hindi } from "@/utils/common";
@@ -12,14 +13,39 @@ import { varnmala_english, varnmala_hindi } from "@/utils/common";
       description="Varnmala is a collection of alphabets in Hindi and English. It is used to teach kids the basics of language."
     />
   </Fragment>
+
   <article class="container__varnmala">
-    <Alphabet list={varnmala_english} title="English" />
-    <Alphabet list={varnmala_hindi} title="Hindi" />
+    <nav class="tabs">
+      <button class="tab active" data-target="english">English</button>
+      <button class="tab" data-target="hindi">Hindi</button>
+    </nav>
+    <div id="english">
+      <Alphabet list={varnmala_english} title="English" />
+    </div>
+    <div id="hindi">
+      <Alphabet list={varnmala_hindi} title="Hindi" />
+    </div>
   </article>
+  <script>
+    const tabs = document.querySelectorAll(".tab");
+
+    tabs.forEach((tab) => {
+      tab.addEventListener("click", () => {
+        // Remove active class from all tabs
+        tabs.forEach((t) => t.classList.remove("active"));
+
+        // Add active class to clicked tab
+        tab.classList.add("active");
 
-  <style>
-    .container__varnmala {
-      display: block;
-    }
-  </style>
+        // Scroll to target section with offset
+        const targetId = tab.getAttribute("data-target");
+        if (targetId) {
+          const targetSection = document.getElementById(targetId);
+          if (targetSection) {
+            targetSection.scrollIntoView({ behavior: "smooth" });
+          }
+        }
+      });
+    });
+  </script>
 </BaseLayout>