From 9e9caa79f8d0de418601857b97a0f1cb31f09df1 Mon Sep 17 00:00:00 2001
From: Akbar <akbarjonjorayev001@gmail.com>
Date: Fri, 26 Apr 2024 15:09:24 +0500
Subject: [PATCH 1/2] code fixed

---
 .../ReadArea/components/AyahsArea/AyahsArea.jsx   | 15 +++++++++------
 1 file changed, 9 insertions(+), 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
index fec1588..83d27b4 100644
--- a/src/pages/Main/components/Quran/ReadArea/components/AyahsArea/AyahsArea.jsx
+++ b/src/pages/Main/components/Quran/ReadArea/components/AyahsArea/AyahsArea.jsx
@@ -8,7 +8,10 @@ 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 (
@@ -16,10 +19,10 @@ export default function AyahsArea({ arAyahs, engAyahs, surahI, setSurahI }) {
       <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}
               </div>
               <div>{ceil(progress) || 0}%</div>
             </div>
@@ -28,13 +31,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>
         )}

From 2e419759bffc31a4d3c9c05e06279f06129fe66d Mon Sep 17 00:00:00 2001
From: Akbar <akbarjonjorayev001@gmail.com>
Date: Fri, 26 Apr 2024 15:11:30 +0500
Subject: [PATCH 2/2] show how much ahays left

---
 .../Quran/ReadArea/components/AyahsArea/AyahsArea.jsx          | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pages/Main/components/Quran/ReadArea/components/AyahsArea/AyahsArea.jsx b/src/pages/Main/components/Quran/ReadArea/components/AyahsArea/AyahsArea.jsx
index 83d27b4..59e3036 100644
--- a/src/pages/Main/components/Quran/ReadArea/components/AyahsArea/AyahsArea.jsx
+++ b/src/pages/Main/components/Quran/ReadArea/components/AyahsArea/AyahsArea.jsx
@@ -22,7 +22,8 @@ export default function AyahsArea({ arAyahs, engAyahs, surahI, setSurahI }) {
             <ProgressBar value={ayah} max={ayahsLen} />
             <div className="df_jc_sb fz_small">
               <div>
-                {ayah}/{ayahsLen}
+                {ayah}/{ayahsLen}{' '}
+                <b className="txt_red">{ayahsLen - ayah} left</b>
               </div>
               <div>{ceil(progress) || 0}%</div>
             </div>