Merge pull request #76 from AJ-Quran/75-ayahs-left

Ayahs left
AJ-Quran · Apr 26, 2024 · 7f79f45 · 7f79f45
2 parents 3859742 + 2e41975
commit 7f79f45
Showing 1 changed file with 10 additions and 6 deletions.
diff --git a/src/pages/Main/components/Quran/ReadArea/components/AyahsArea/AyahsArea.jsx b/src/pages/Main/components/Quran/ReadArea/components/AyahsArea/AyahsArea.jsx
@@ -8,18 +8,22 @@ import { deviceIsPhone } from '../../../../../../../js/utils/device'
 import './AyahsArea.css'
 
 export default function AyahsArea({ arAyahs, engAyahs, surahI, setSurahI }) {
-  const progress = progressPercent(surahI.ayah, arAyahs?.length)
+  const ayahsLen = arAyahs?.length || 0
+  const { ayah } = surahI
+
+  const progress = progressPercent(ayah, arAyahs?.length)
   const isPhone = deviceIsPhone()
 
   return (
     <div className="ayahs_area list_y df_jc_sb h_100">
       <div className="list_y">
         <div className="ayahs_area_info list_y mar_ce">
           <div className="list_y_small">
-            <ProgressBar value={surahI.ayah} max={arAyahs?.length || 0} />
+            <ProgressBar value={ayah} max={ayahsLen} />
             <div className="df_jc_sb fz_small">
               <div>
-                {surahI.ayah}/{arAyahs?.length || 0}
+                {ayah}/{ayahsLen}{' '}
+                <b className="txt_red">{ayahsLen - ayah} left</b>
               </div>
               <div>{ceil(progress) || 0}%</div>
             </div>
@@ -28,13 +32,13 @@ export default function AyahsArea({ arAyahs, engAyahs, surahI, setSurahI }) {
             <AyahsAreaButtons surahI={surahI} setSurahI={setSurahI} />
           )}
         </div>
-        {surahI.ayah < (arAyahs?.length || 0) && (
+        {ayah < ayahsLen && (
           <div className="list_y">
             <div className="con_bg_df ayahs_text_area df_f_ce">
-              <p className="txt_ar w_100">{arAyahs[surahI.ayah]?.text}</p>
+              <p className="txt_ar w_100">{arAyahs[ayah]?.text}</p>
             </div>
             <div className="con_bg_df ayahs_text_area df_f_ce ayahs_eng_area">
-              <p className="w_100">{engAyahs[surahI.ayah]?.text}</p>
+              <p className="w_100">{engAyahs[ayah]?.text}</p>
             </div>
           </div>
         )}