fix bug bookmark error

fajriyan · Oct 21, 2024 · 90e882f · 90e882f
1 parent eca42ca
commit 90e882f
Show file tree

Hide file tree

Showing 9 changed files with 125 additions and 73 deletions.
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
@@ -14,6 +14,22 @@ const Footer = () => {
           </p>
         </div>
         <div className="grid-flow-col gap-4 md:place-self-center md:justify-self-end">
+          <a
+            href="https://github.com/fajriyan/al-quran/"
+            target="_blank"
+            rel="noreferrer"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="20"
+              height="20"
+              fill="currentColor"
+              className="bi bi-instagram"
+              viewBox="0 0 16 16"
+            >
+              <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8" />
+            </svg>
+          </a>
           <a
             href="https://www.instagram.com/fajriyan.nur/"
             target="_blank"

diff --git a/src/components/Navigation.jsx b/src/components/Navigation.jsx
@@ -1,37 +1,38 @@
 import LinkProgresBars from "../lib/LinkProgresBars";
-import {useContext, useEffect} from "react"
+import { useContext, useEffect } from "react";
 import ThemeContext from "../lib/ThemeContext";
+import numbertosurah from "../data/numbertosurah.json";
 
 const Navigation = (props) => {
-const [theme, setTheme] = useContext(ThemeContext);
-const root = window.document.documentElement;
-let storageTheme = JSON.parse(localStorage.getItem("theme"))
+  const [theme, setTheme] = useContext(ThemeContext);
+  const root = window.document.documentElement;
+  let storageTheme = JSON.parse(localStorage.getItem("theme"));
 
- const handleTheme = () => {
-  if(storageTheme.theme == "light"){
-    setTheme("dark");
-   localStorage.setItem(
-    "theme",
-    JSON.stringify({
-      theme:"dark",
-      key: "201273891793871263120"
-    })
-   )
-   root.classList.remove('light');
-   root.classList.add("dark");
-  } else if (storageTheme.theme == "dark") {
-    setTheme("light");
-    localStorage.setItem(
-     "theme",
-     JSON.stringify({
-       theme:"light",
-       key: "231273891793871263123"
-     })
-    )
-    root.classList.remove('dark');
-    root.classList.add("light");
-  }
- }
+  const handleTheme = () => {
+    if (storageTheme.theme == "light") {
+      setTheme("dark");
+      localStorage.setItem(
+        "theme",
+        JSON.stringify({
+          theme: "dark",
+          key: "201273891793871263120",
+        })
+      );
+      root.classList.remove("light");
+      root.classList.add("dark");
+    } else if (storageTheme.theme == "dark") {
+      setTheme("light");
+      localStorage.setItem(
+        "theme",
+        JSON.stringify({
+          theme: "light",
+          key: "231273891793871263123",
+        })
+      );
+      root.classList.remove("dark");
+      root.classList.add("light");
+    }
+  };
 
   return (
     <div className="backdrop-blur-sm bg-white/90 dark:bg-gray-800/90 border-b dark:border-slate-500 sticky top-0 z-[100]">
@@ -52,7 +53,7 @@ let storageTheme = JSON.parse(localStorage.getItem("theme"))
               <path d="M16 14a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12zm-4.5-6.5H5.707l2.147-2.146a.5.5 0 1 0-.708-.708l-3 3a.5.5 0 0 0 0 .708l3 3a.5.5 0 0 0 .708-.708L5.707 8.5H11.5a.5.5 0 0 0 0-1z" />
             </svg>
             <span className="hidden md:block text-white dark:text-slate-200">
-            Kembali
+              Kembali
             </span>
           </LinkProgresBars>
 
@@ -81,21 +82,35 @@ let storageTheme = JSON.parse(localStorage.getItem("theme"))
         </div>
         <div className="flex-none">
           <ul className="menu menu-horizontal">
-            <li> 
-            {theme == "dark"?(
-                  <button onClick={handleTheme}>
-                    <svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" fill="currentColor" className="bi bi-moon-stars-fill" viewBox="0 0 16 16">
-                      <path d="M6 .278a.77.77 0 0 1 .08.858 7.2 7.2 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277q.792-.001 1.533-.16a.79.79 0 0 1 .81.316.73.73 0 0 1-.031.893A8.35 8.35 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.75.75 0 0 1 6 .278"/>
-                      <path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.73 1.73 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.73 1.73 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.73 1.73 0 0 0 1.097-1.097zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.16 1.16 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.16 1.16 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732z"/>
-                    </svg>
-                  </button>
-                ): (
-                  <button onClick={handleTheme}>
-                    <svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" fill="currentColor" className="bi bi-brightness-high-fill" viewBox="0 0 16 16">
-                      <path d="M12 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8m10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0m-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0m9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708"/>
-                    </svg>
-                  </button>
-                )}
+            <li>
+              {theme == "dark" ? (
+                <button onClick={handleTheme}>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="23"
+                    height="23"
+                    fill="currentColor"
+                    className="bi bi-moon-stars-fill"
+                    viewBox="0 0 16 16"
+                  >
+                    <path d="M6 .278a.77.77 0 0 1 .08.858 7.2 7.2 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277q.792-.001 1.533-.16a.79.79 0 0 1 .81.316.73.73 0 0 1-.031.893A8.35 8.35 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.75.75 0 0 1 6 .278" />
+                    <path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.73 1.73 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.73 1.73 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.73 1.73 0 0 0 1.097-1.097zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.16 1.16 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.16 1.16 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732z" />
+                  </svg>
+                </button>
+              ) : (
+                <button onClick={handleTheme}>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="23"
+                    height="23"
+                    fill="currentColor"
+                    className="bi bi-brightness-high-fill"
+                    viewBox="0 0 16 16"
+                  >
+                    <path d="M12 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8m10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0m-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0m9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708" />
+                  </svg>
+                </button>
+              )}
             </li>
             <li tabIndex={0}>
               <span>
@@ -114,13 +129,19 @@ let storageTheme = JSON.parse(localStorage.getItem("theme"))
               <ul className="p-2 backdrop-blur-sm bg-white/90 dark:bg-gray-800/90 border rounded-md overflow-y-scroll max-h-[350px] min-w-[100px]">
                 {props.singleSP?.ayat?.map((sp) => (
                   <li className="h-10" key={sp.nomor}>
-                    <a href={"/surah/" + sp.surah + "#surahke" + sp.nomor}>
+                    <a
+                      href={
+                        "/surah/" +
+                        numbertosurah[sp.surah] +
+                        "#surahke" +
+                        sp.nomor
+                      }
+                    >
                       {sp.nomor}
                     </a>
                   </li>
                 ))}
               </ul>
-
             </li>
           </ul>
         </div>

diff --git a/src/index.css b/src/index.css
@@ -9,8 +9,8 @@ html {
   display: none;
 }
 .no-scrollbars {
-  -ms-overflow-style: none;  /* IE and Edge */
-  scrollbar-width: none;  /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
 }
 
 @font-face {
@@ -61,3 +61,7 @@ html {
 ::-webkit-scrollbar-thumb:hover {
   background: #0085d7;
 }
+
+html {
+  scroll-padding-top: 80px; /* Sesuaikan dengan tinggi navbar */
+}
diff --git a/src/page/detailSurah/DetailSurah.jsx b/src/page/detailSurah/DetailSurah.jsx
@@ -4,6 +4,7 @@ import { toast } from "react-hot-toast";
 import DetailSurahView from "./DetailSurahView";
 import ProgresContext from "../../lib/ProgresContext";
 import surahtonumber from "../../data/surahtonumber.json";
+import numbertosurah from "../../data/numbertosurah.json";
 
 const DetailSurah = () => {
   const { id } = useParams();
@@ -85,7 +86,7 @@ const DetailSurah = () => {
 
   const saveAyat = (url, ayat, namaSurat) => {
     toast.success("Simpan Berhasil");
-    localStorage.setItem("url", url);
+    localStorage.setItem("url", numbertosurah[url]);
     localStorage.setItem("ayat", ayat);
     localStorage.setItem("namaSurat", namaSurat);
   };
@@ -145,6 +146,7 @@ const DetailSurah = () => {
         setFont={setFont}
         property={propertyStorage}
         setProperty={setProperty}
+        numbertosurah={numbertosurah}
       />
     </>
   );

diff --git a/src/page/detailSurah/DetailSurahView.jsx b/src/page/detailSurah/DetailSurahView.jsx
@@ -17,8 +17,7 @@ const DetailSurahView = ({
   setModalAyat,
   font,
   setFont,
-  property,
-  setProperty,
+  numbertosurah,
 }) => {
   return (
     <>
@@ -59,7 +58,7 @@ const DetailSurahView = ({
       />
       <Toaster />
 
-      <div className="container mx-auto selection:bg-blue-200">
+      <div className="container mx-auto selection:bg-blue-200 min-h-[90vh]">
         <div className="px-3 lg:px-0 flex flex-wrap gap-2 border-b border-slate-300 dark:border-slate-400/80 pb-2 items-end">
           {/* ++ Control Font */}
           <div>
@@ -158,7 +157,7 @@ const DetailSurahView = ({
                     </button>
                     <ul
                       tabIndex={0}
-                      className="dropdown-content menu p-1 text-[15px] shadow-md border rounded-md bg-base-100 w-[150px] "
+                      className="dropdown-content menu p-1 text-[15px] shadow-md border rounded-md w-[150px] bg-white dark:bg-slate-800"
                     >
                       <li>
                         <CopyToClipboard onCopy={copySurat} text={single.ar}>
@@ -191,7 +190,7 @@ const DetailSurahView = ({
                     className="modal-toggle"
                   />
                   <div className="modal md:items-start md:pt-10 px-3">
-                    <div className="modal-box w-full max-w-7xl">
+                    <div className="modal-box w-full max-w-7xl bg-white dark:bg-slate-800">
                       <label
                         htmlFor={`tafsir-modal-${single.nomor}`}
                         className="btn btn-sm btn-circle absolute right-2 top-2"
@@ -286,8 +285,11 @@ const DetailSurahView = ({
             if (dataDetails.surat_sebelumnya !== false) {
               return (
                 <a
-                  href={"/surah/" + dataDetails.surat_sebelumnya?.nomor}
-                  className="btn gap-2 bg-gradient-to-r hover:bg-gradient-to-t from-slate-900 to-slate-700 border-none hover:shadow-xl focus:ring-2 ring-offset-2 ring-slate-900"
+                  href={
+                    "/surah/" +
+                    numbertosurah[dataDetails.surat_sebelumnya?.nomor]
+                  }
+                  className="btn text-white gap-2 bg-gradient-to-r hover:bg-gradient-to-t from-slate-900 to-slate-700 border-none focus:ring-2 ring-offset-2 ring-slate-900"
                 >
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
@@ -297,7 +299,7 @@ const DetailSurahView = ({
                     className="bi bi-arrow-left-square-fill"
                     viewBox="0 0 16 16"
                   >
-                    <path d="M16 14a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12zm-4.5-6.5H5.707l2.147-2.146a.5.5 0 1 0-.708-.708l-3 3a.5.5 0 0 0 0 .708l3 3a.5.5 0 0 0 .708-.708L5.707 8.5H11.5a.5.5 0 0 0 0-1z" />
+                    <path d="m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z" />
                   </svg>
                   {dataDetails.surat_sebelumnya?.nama_latin}
                 </a>
@@ -312,8 +314,11 @@ const DetailSurahView = ({
             if (dataDetails.surat_selanjutnya !== false) {
               return (
                 <a
-                  href={"/surah/" + dataDetails.surat_selanjutnya?.nomor}
-                  className="btn gap-2 bg-gradient-to-r hover:bg-gradient-to-t from-slate-900 to-slate-700 border-none hover:shadow-xl focus:ring-2 ring-offset-2 ring-slate-900"
+                  href={
+                    "/surah/" +
+                    numbertosurah[dataDetails.surat_selanjutnya?.nomor]
+                  }
+                  className="btn gap-2 text-white bg-gradient-to-r hover:bg-gradient-to-t from-slate-900 to-slate-700 border-none focus:ring-2 ring-offset-2 ring-slate-900"
                 >
                   {dataDetails.surat_selanjutnya?.nama_latin}
                   <svg
@@ -324,7 +329,7 @@ const DetailSurahView = ({
                     className="bi bi-arrow-right-square-fill"
                     viewBox="0 0 16 16"
                   >
-                    <path d="M0 14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v12zm4.5-6.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5a.5.5 0 0 1 0-1z" />
+                    <path d="m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z" />
                   </svg>
                 </a>
               );

diff --git a/src/page/homepage/Home.jsx b/src/page/homepage/Home.jsx
@@ -76,7 +76,6 @@ const Home = () => {
 
   return (
     <>
-      {/* <LinkChange ></LinkChange> */}
       <HomeView
         Loading={Loading}
         RekomendationSurah={RekomendationSurah}

diff --git a/src/page/homepage/HomeView.jsx b/src/page/homepage/HomeView.jsx
@@ -18,7 +18,7 @@ const HomeView = ({
 }) => {
   try {
     return (
-      <>
+      <div className="min-h-screen">
         <Toaster />
         {localStorage.removeItem("fromBookmark", false)}
 
@@ -180,8 +180,12 @@ const HomeView = ({
                   {RekomendationSurah.map((rs) => (
                     <LinkProgresBars
                       key={rs.surah}
-                      to={(rs.ex == "nosurah" ? "/" : "/surah/") + rs.url}
-                      className="min-w-[130px] md:min-w-0 px-2 md:px-3 py-1 rounded-lg bg-slate-100 hover:bg-slate-200 hover:bg-slate-100 text-slate-700 font-medium text-[13px] md:text-sm"
+                      to={
+                        rs.ex == "nosurah"
+                          ? "/" + rs.url
+                          : "/surah/" + numbertosurah[rs.url]
+                      }
+                      className="min-w-[130px] md:min-w-0 px-2 md:px-3 py-1 rounded-lg bg-slate-100 hover:bg-slate-200 text-slate-700 font-medium text-[13px] md:text-sm"
                     >
                       {rs.ex == "nosurah" ? "" : "Surah "}
                       {rs.surah}
@@ -194,7 +198,7 @@ const HomeView = ({
         </div>
         <div className="container mx-auto px-3">
           {/* Bookmark Start  */}
-          {lanjutBaca[0].surat ? (
+          {lanjutBaca[0].ayat ? (
             <div className="container mx-auto my-5">
               <div
                 className="card flex flex-row w-full bg-white dark:bg-slate-900
@@ -225,8 +229,8 @@ const HomeView = ({
                       onClick={() => localStorage.setItem("fromBookmark", true)}
                     >
                       <Link
-                        to={`/surah/${numbertosurah[lanjutBaca[0].url]}`}
-                        className="btn btn-sm bg-gradient-to-r hover:bg-gradient-to-t from-slate-800 to-slate-700 border-none hover:shadow-lg focus:ring-2 ring-offset-2 ring-slate-800"
+                        to={`/surah/${lanjutBaca[0].url}`}
+                        className="btn btn-sm bg-gradient-to-r hover:bg-gradient-to-t from-slate-800 to-slate-700 border-none hover:shadow-lg focus:ring-2 ring-offset-2 ring-slate-800 text-slate-200"
                       >
                         Lanjutkan Membaca
                       </Link>
@@ -273,12 +277,13 @@ const HomeView = ({
           )}
           {/* Bookmark End  */}
         </div>
+
         <div
           className={`container mx-auto grid lg:grid-cols-3 lg:gap-4 sm:grid-cols-2 sm:gap-4 gap-4 px-3 mb-14`}
         >
           {Loading ? (
             filteredData.length === 0 ? (
-              <div className="p-4 col-span-3 border border-dashed border-slate-400 dark:border-slate-500 w-full text-md md:flex gap-1 items-center rounded-md ">
+              <div className="p-4 col-span-3 border border-dashed border-slate-400 dark:border-slate-500 w-full text-md md:flex gap-1 items-center rounded-md h-min">
                 Maaf, Surah{" "}
                 <span className="font-semibold underline">{querySearch}</span>{" "}
                 tidak ditemukan, silahkan periksa kembali pencarian anda.{" "}
@@ -554,7 +559,7 @@ const HomeView = ({
           )}
         </div>
         <Footer />
-      </>
+      </div>
     );
   } catch (error) {
     console.log("Home View = " + error);

diff --git a/src/page/matsurat/Matsurat.jsx b/src/page/matsurat/Matsurat.jsx
@@ -679,7 +679,7 @@ const Matsurat = () => {
             <p className="absolute bg-white text-xs -mt-5 px-2">Opsi Ukuran</p>
             <div className="mt-1">
             <p className="text-xs">Ukuran Arab</p>
-            <select  defaultValue={option.ar} className="border border-slate-400 px-1 rounded-md" onChange={(ar) => setOption({ ar: ar.target.value })}>
+            <select  defaultValue={option.ar} className="border border-slate-400 px-1 rounded-md bg-white" onChange={(ar) => setOption({ ar: ar.target.value })}>
               <option value="26">Kecil</option>
               <option value="20">Default</option>
               <option value="25">Besar</option>
@@ -688,7 +688,7 @@ const Matsurat = () => {
             </div>
             <div className="mt-1">
             <p className="text-xs">Ukuran Arti</p>
-            <select defaultValue={option.id} className="border border-slate-400 px-1 rounded-md" onChange={(id) => setOption({ id: id.target.value })}>
+            <select defaultValue={option.id} className="border border-slate-400 px-1 rounded-md bg-white" onChange={(id) => setOption({ id: id.target.value })}>
               <option value="14">Kecil</option>
               <option value="16">Default</option>
               <option value="20">Besar</option>