Merge branch 'main' into production

src/css/pages/SurahIndex.scss

@@ -56,6 +56,7 @@ body .root .content.theme {
   }
 
   footer {
+    flex-wrap: unset;
     a {
       display: flex;
       flex-direction: row;
@@ -66,6 +67,11 @@ body .root .content.theme {
         padding: 0 0 0 7px;
       }
     }
+    input {
+      padding: 10px;
+      border-radius: 10px;
+      border: 1px solid #000;
+    }
   }
 }
 
@@ -94,6 +100,7 @@ body .root .content.theme.ar {
   }
 
   footer {
+    flex-direction: unset;
     font-family: "Mada Regular";
     a span {
       padding: 0 7px 0 0;

src/css/themes/blue/pages/_SurahIndex.scss

@@ -29,6 +29,12 @@
         font-weight: bold;
       }
     }
+    input {
+      border: 1px solid $primary-color;
+      &:focus {
+        outline-color: $primary-color;
+      }
+    }
   }
 }
 

src/css/themes/green/pages/_SurahIndex.scss

@@ -14,13 +14,21 @@
     }
   }
 
-  footer a {
-    &:active, &:link, &:visited {
-      color: $green1;
-      text-decoration: none;
+  footer {
+    a {
+      &:active, &:link, &:visited {
+        color: $green1;
+        text-decoration: none;
+      }
+      &:hover {
+        font-weight: bold;
+      }
     }
-    &:hover {
-      font-weight: bold;
+    input {
+      border: 1px solid $green1;
+      &:focus {
+        outline-color: $green1;
+      }
     }
   }
 }

src/i18n.json

@@ -5,6 +5,7 @@
     "surah": "Surah",
     "ayah": "Ayah",
     "comma": ",",
+    "filter": "Filter",
     "meta": {
       "index": {"description": "Explore the chapters of The Noble Quran. Browse a list of chapters and choose a chapter you can read and listen to. Enhance your understanding of a sacred text."},
       "stream": {"description": "Experience The Noble Quran. Read and listen to a single chapter with a verse streamed at regular intervals. Immerse yourself in a sacred text in a unique way."}
@@ -134,6 +135,7 @@
     "surah": "سورة",
     "ayah": "آية",
     "comma": "،",
+    "filter": "تصفية",
     "meta": {
       "index": {
         "description": "استكشف فصول القرآن الكريم. تصفح قائمة بالفصول واختر فصلاً يمكنك قراءته والاستماع إليه. قم بتعزيز فهمك لنص مقدس."

src/js/components/SurahIndexFilter.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { TFunction } from "lib/i18n";
+import * as Quran from "lib/Quran";
+
+type Props = {
+  t: TFunction;
+  locale: Quran.Locale;
+  setIndex: (k: Quran.Surah[]) => void;
+  surahs: Quran.Surah[];
+};
+
+export function SurahIndexFilter({ t, locale, setIndex, surahs }: Props) {
+  const onInput = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const {
+      target: { value },
+    } = e;
+    if (value === "") {
+      setIndex(surahs);
+    } else {
+      const regexp = new RegExp(value, "i");
+      const newIndex = surahs.filter(
+        surah =>
+          regexp.test(surah.localizedName) || regexp.test(String(surah.id)),
+      );
+      setIndex(newIndex);
+    }
+  };
+
+  return (
+    <input type="text" placeholder={t(locale, "filter")} onChange={onInput} />
+  );
+}

src/js/pages/SurahIndex.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect } from "react";
+import React, { useRef, useState, useEffect } from "react";
 import ReactDOM from "react-dom/client";
 import classNames from "classnames";
 
@@ -8,6 +8,7 @@ import { ThemeSelect } from "components/ThemeSelect";
 import { LanguageSelect } from "components/LanguageSelect";
 import { i18n, formatNumber, TFunction } from "lib/i18n";
 import { RightArrow } from "components/Icon";
+import { SurahIndexFilter } from "components/SurahIndexFilter";
 
 interface Props {
   locale: Quran.Locale;
@@ -17,6 +18,7 @@ interface Props {
 
 function SurahIndex({ locale, surahs, t }: Props) {
   const [theme, setTheme] = useTheme();
+  const [index, setIndex] = useState<Quran.Surah[]>(surahs);
   const ref = useRef<HTMLDivElement>();
 
   useEffect(() => {
@@ -41,7 +43,7 @@ function SurahIndex({ locale, surahs, t }: Props) {
         </nav>
       </header>
       <ul className="body index scroll-y">
-        {surahs.map((surah, key) => (
+        {index.map((surah, key) => (
           <li className="surah" key={key}>
             <a href={`/${locale}/${surah.slug}/`}>
               <span className="id">{formatNumber(surah.id, locale)}</span>
@@ -58,6 +60,12 @@ function SurahIndex({ locale, surahs, t }: Props) {
           <RightArrow />
           <span>{t(locale, "ChooseRandomChapter")}</span>
         </a>
+        <SurahIndexFilter
+          t={t}
+          locale={locale}
+          surahs={surahs}
+          setIndex={setIndex}
+        />
       </footer>
     </div>
   );