Add routes for 'SurahStream'

src/js/components/Head.tsx

@@ -17,7 +17,7 @@ export function Head({ title, locale, children }: Props) {
         <div className="flex items-center justify-center">
           <a
             data-testid="h1"
-            href={`/${locale.name}/index.html`}
+            href={`/${locale.name}/`}
             className="flex rounded justify-center p-3 m-0 mb-4 w-full no-underline"
           >
             {title}

src/js/components/SurahIndex/index.tsx

@@ -70,7 +70,7 @@ export function SurahIndex({ locale, surahs, t }: Props) {
           >
             <a
               className="flex items-center color-primary no-underline rounded w-11/12 h-8"
-              href={`/${locale.name}/${surah.urlName}/index.html`}
+              href={`/${locale.name}/${surah.id}/`}
             >
               <span className="background-secondary color-white rounded flex w-8 font-extrabold w-5 mr-3 justify-center text-center">
                 {formatNumber(locale, surah.id)}

src/js/components/SurahStream/index.tsx

@@ -23,7 +23,7 @@ type Props = {
   t: TFunction;
 };
 
-export function SurahStream({ surah, locale, t }: Props) {
+export function SurahStream({ surahId, localeId, t }: Props) {
   const [stream, setStream] = useState<TAyat>([]);
   const [isPaused, setIsPaused] = useState<boolean>(false);
   const [audioEnabled, setAudioEnabled] = useState<boolean>(false);
@@ -32,6 +32,9 @@ export function SurahStream({ surah, locale, t }: Props) {
   const [showLangDropdown, setShowLangDropdown] = useState<boolean>(false);
   const [showThemeDropdown, setShowThemeDropdown] = useState<boolean>(false);
   const [theme, setTheme] = useTheme();
+
+  const locale = Quran.locales[localeId];
+  const surah = Quran.surahs[localeId][parseInt(surahId) - 1]
   const rootRef = useRef<HTMLElement>(null);
   const audio = useMemo(() => new Audio(), []);
   const readyToRender = stream.length > 0;

src/js/index.tsx

@@ -1,6 +1,7 @@
 import { Quran } from "Quran";
 import { T } from "~/lib/t";
 import { SurahIndex } from "~/components/SurahIndex";
+import { SurahStream } from "~/components/SurahStream";
 import { render } from "preact";
 import { useState, useEffect, useMemo, useRef } from "preact/hooks";
 import * as React from "preact/compat";
@@ -9,6 +10,7 @@ import { Router } from "preact-router";
 import "core-js";
 
 const exports = {
+  Quran,
   React,
   render,
   useState,
@@ -20,7 +22,6 @@ const exports = {
 Object.assign(window, exports);
 
 document.addEventListener("DOMContentLoaded", () => {
-  console.log(Quran.surahs["en"][0].ayat)
   const Main = (function () {
     const t = T(require("@json/t.json"));
     return () => {
@@ -29,6 +30,7 @@ document.addEventListener("DOMContentLoaded", () => {
           <SurahIndex path="/" locale={Quran.locales["en"]} surahs={Quran.surahs["en"]} t={t} />
 	  <SurahIndex path="/en" locale={Quran.locales["en"]} surahs={Quran.surahs["en"]} t={t} />
 	  <SurahIndex path="/ar" locale={Quran.locales["ar"]} surahs={Quran.surahs["ar"]} t={t} />
+	  <SurahStream path="/:localeId/:surahId" t={t} />
         </Router>
       );
     };