[main]: added copy icon to barahkhadi; avgrah added

Author: xkeshav

src/assets/icons/copy.svg

@@ -24,7 +24,7 @@
   & .list {
     display: grid;
     grid-gap: 1.5rem;
-    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
+    grid-template-columns: repeat(5, minmax(20rem, 1fr));
     margin-block: 2rem;
 
     & .letter {
@@ -81,17 +81,19 @@
   }
 }
 
-/*@container layout (width <=768px) {
-  .list {
-    grid-template-columns: repeat(2, 1fr);
-  }
+@container alphabet (width <=768px) {
+  .container__alphabet {
+    & .list {
+      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+    }
 
-  .letter {
-    color: black;
-    font-size: max(1.5em, 1.23em + 2cqi);
-  }
+    & .letter {
+      color: black;
+      font-size: max(1.5em, 1.23em + 2cqi);
+    }
 
-  .letter p {
-    font-size: clamp(2rem, 4vw, 3rem) !important;
+    & def {
+      font-size: 1.5rem;
+    }
   }
-}*/
+}

src/assets/styles/alphabet.css

@@ -490,9 +490,6 @@
     color: white;
   }
 
-  [data-debug="false"] .debug-toggle g:first-of-type {
-    display: block;
-  }
 
   [popover] nav {
     overflow-y: auto;

src/assets/styles/menu.css

@@ -1,7 +1,7 @@
 ---
 import "@/assets/styles/alphabet.css";
 import Letter from "@/components/Letter.astro";
-import { type LetterEntity } from "@/types";
+import type { LetterEntity } from "@/types";
 
 type Props = {
   title: string;

src/components/Alphabet.astro

@@ -1,5 +1,6 @@
 ---
 import type { LetterEntity } from "@/types";
+import CopyIcon from "@/assets/icons/copy.svg";
 
 type Props = {
   item: LetterEntity;
@@ -12,6 +13,104 @@ const {
 
 <div class="letter">
   <p class="character">{letter}</p>
-  <p data-id="tgt" class="code" title="Click to copy">&copy;</p>
+  <button id="copy-btn" class="copy-btn" title="Copy character" data-letter={letter}>
+    <CopyIcon />
+  </button>
+  <span class="copy-feedback">Copied!</span>
   <def data-id="def" class="help" title="Definition">{code}</def>
 </div>
+
+<script>
+  // Wait for the DOM to be loaded
+  document.addEventListener("DOMContentLoaded", () => {
+    const copyButtons = document.querySelectorAll("#copy-btn");
+
+    copyButtons.forEach((button) => {
+      button.addEventListener("click", async () => {
+        const letter = (button as HTMLElement).dataset.letter;
+        if (!letter) return;
+
+        try {
+          await navigator.clipboard.writeText(letter);
+          const letterDiv = button.closest(".letter") as HTMLElement;
+          const feedback = letterDiv.querySelector(".copy-feedback") as HTMLElement;
+
+          // Add animation classes
+          letterDiv.classList.add("copied");
+          feedback.classList.add("show");
+
+          // Remove animation classes after animation
+          setTimeout(() => {
+            letterDiv.classList.remove("copied");
+            feedback.classList.remove("show");
+          }, 2000);
+        } catch (err) {
+          console.error("Failed to copy text: ", err);
+        }
+      });
+    });
+  });
+</script>
+
+<style>
+  .letter {
+    position: relative;
+  }
+
+  .copy-btn {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 4px;
+    color: #666;
+    transition: color 0.2s;
+  }
+
+  .copy-btn:hover {
+    color: #333;
+  }
+
+  .copy-btn svg {
+    display: block;
+  }
+
+  .copy-feedback {
+    position: absolute;
+    top: -30px;
+    left: 50%;
+    transform: translateX(-50%) translateY(10px);
+    background: #333;
+    color: white;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 14px;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s ease;
+  }
+
+  .copy-feedback.show {
+    opacity: 1;
+    visibility: visible;
+    transform: translateX(-50%) translateY(0);
+  }
+
+  .letter.copied {
+    animation: copyPulse 0.5s ease;
+  }
+
+  @keyframes copyPulse {
+    0% {
+      transform: scale(1);
+      box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.4);
+    }
+    50% {
+      transform: scale(1.05);
+      box-shadow: 0 0 0 10px rgba(52, 152, 219, 0.2);
+    }
+    100% {
+      transform: scale(1);
+      box-shadow: 0 0 0 0 rgba(52, 152, 219, 0);
+    }
+  }
+</style>

src/components/Dialog.js

@@ -18,7 +18,8 @@ export const hindiVowelList = hindiVowels.filter((v) => !extraHindiVowelKey.incl
 const additionalConsonants = [
   String.fromCharCode(2325, 2381, 2359),
   String.fromCharCode(2340, 2381, 2352),
-  String.fromCharCode(2332, 2381, 2334)
+  String.fromCharCode(2332, 2381, 2334),
+  String.fromCharCode(2365)
 ];
 
 export const hindiConsonants = [
@@ -61,8 +62,10 @@ export const barahkhadi = (code: number) => {
   return list.concat(sanyukat);
 };
 
+// 2365 avgrah ऽ
+
 // exclude 2345 ' 2353 / 2355 / 2356
-export const extraLetters = [2345, 2353, 2356]; // 'ऩ', 'ऱ', 'ऴ'
+export const extraLetters = [2345, 2353, 2355, 2356]; // 'ऩ', 'ऱ', 'ऴ'
 export const varnmala = Array.from(Array(37), (_, i) => ({ code: 2325 + i, letter: String.fromCharCode(2325 + i) }));
 export const varnmala_english = Array.from(Array(26), (_, i) => ({
   code: 65 + i,

src/components/Letter.astro

@@ -1,6 +1,6 @@
 import HomeIcon from "@/assets/icons/home.svg";
 import RecordIcon from "@/assets/icons/record.svg";
-import type { LinkProps } from "@/types";
+import type { LinkProps } from "@/types/index.ts";
 
 export const APP_NAME = "Template";