Toggle ayah highlight on click

ahmed0saber · May 19, 2024 · 6e58d6c · 6e58d6c
1 parent b1a62db
commit 6e58d6c
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 7 deletions.
diff --git a/app/components/QuranSection/QuranSection.js b/app/components/QuranSection/QuranSection.js
@@ -2,6 +2,7 @@
 
 import { useEffect, useState } from 'react';
 import normalizeArabic from './arabic-normalizer';
+import Ayah from './components/Ayah';
 import './style.css';
 
 export default function QuranSection() {
@@ -82,12 +83,7 @@ export default function QuranSection() {
                         <div class="surah-name">
                             <h2>{selectedSurah.name}</h2>
                         </div>
-                        {selectedSurah.ayahs.map(ayah => (
-                            <>
-                                <span>{ayah.text.replace("\n", "")}</span>
-                                <span class="ayah-number">{ayah.numberInSurah}</span>
-                            </>
-                        ))}
+                        {selectedSurah.ayahs.map(ayah => <Ayah ayah={ayah}/>)}
                     </div>
                 ) : null}
             </div>

diff --git a/app/components/QuranSection/components/Ayah.js b/app/components/QuranSection/components/Ayah.js
@@ -0,0 +1,20 @@
+import { useState } from "react"
+import "../style.css"
+
+export default function Ayah({ ayah }) {
+    const [isHighlighted, setIsHighlighted] = useState(false)
+
+    const toggleHighlight = () => {
+        setIsHighlighted(prev => !prev)
+    }
+
+    return (
+        <>
+            <span
+                onClick={toggleHighlight}
+                className={isHighlighted ? "highlighted" : null}
+            >{ayah.text.replace("\n", "")}</span>
+            <span class="ayah-number">{ayah.numberInSurah}</span>
+        </>
+    )
+}
diff --git a/app/components/QuranSection/style.css b/app/components/QuranSection/style.css
@@ -113,7 +113,7 @@
 
 .quran-section-popup .popup-content ::selection {
     color: #FEFEFE;
-    background: green;
+    background-color: green;
 }
 
 .quran-section-popup .popup-content .ayah-number {
@@ -138,4 +138,8 @@
     font-size: larger;
     display: flex;
     justify-content: center;
+}
+
+.highlighted {
+    background-color: #00800040;
 }