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..59e3036 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,11 @@ export default function AyahsArea({ arAyahs, engAyahs, surahI, setSurahI }) {
- +
- {surahI.ayah}/{arAyahs?.length || 0} + {ayah}/{ayahsLen}{' '} + {ayahsLen - ayah} left
{ceil(progress) || 0}%
@@ -28,13 +32,13 @@ export default function AyahsArea({ arAyahs, engAyahs, surahI, setSurahI }) { )}
- {surahI.ayah < (arAyahs?.length || 0) && ( + {ayah < ayahsLen && (
-

{arAyahs[surahI.ayah]?.text}

+

{arAyahs[ayah]?.text}

-

{engAyahs[surahI.ayah]?.text}

+

{engAyahs[ayah]?.text}

)}