improve bookmark

fajriyan · Nov 29, 2024 · 7655a80 · 7655a80
1 parent 6479c75
commit 7655a80
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 13 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -9,6 +9,7 @@ import TopBarProgress from "react-topbar-progress-indicator";
 import ProgresContext from "./lib/ProgresContext";
 import ThemeContext from "./lib/ThemeContext";
 import Matsurat from "./page/matsurat/Matsurat";
+import { Toaster } from "react-hot-toast";
 
 function App() {
   const progresBarState = useState(true);
@@ -57,6 +58,13 @@ function App() {
     <BrowserRouter>
       <ThemeContext.Provider value={theme}>
         <ProgresContext.Provider value={progresBarState}>
+          <Toaster 
+            position="top-right"
+            reverseOrder={false}
+            toastOptions={{
+              duration: 1000,
+            }}
+            />
           <CustomRoutes>
             {/* <Routes> */}
             <Route path="/" element={<Home />} />

diff --git a/src/components/Navigation.jsx b/src/components/Navigation.jsx
@@ -36,11 +36,11 @@ const Navigation = (props) => {
 
   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]">
-      <div className="navbar container mx-auto flex justify-between">
+      <div className="navbar container mx-auto flex justify-between lg:p-0">
         <div className="flex gap-2 md:gap-0">
           <LinkProgresBars
             to="/"
-            className="flex items-center rounded-md md:btn gap-2 btn-md border-none bg-[conic-gradient(at_left,_var(--tw-gradient-stops))] from-sky-400 to-blue-800 hover:bg-[conic-gradient(at_right,_var(--tw-gradient-stops))] hover:from-sky-300 hover:to-blue-700 focus:ring-2 ring-offset-2 ring-blue-700"
+            className="flex items-center rounded-md md:btn gap-2 btn-md 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"
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"

diff --git a/src/index.css b/src/index.css
@@ -23,6 +23,7 @@ html {
   font-weight: normal;
   font-display: swap;
 }
+
 .arab {
   font-size: 20px;
   line-height: 65px;
@@ -62,6 +63,10 @@ html {
   background: #0085d7;
 }
 
+.hidescroll::-webkit-scrollbar {
+  display: none;
+}  
+
 html {
   scroll-padding-top: 80px; /* Sesuaikan dengan tinggi navbar */
 }
diff --git a/src/page/detailSurah/DetailSurah.jsx b/src/page/detailSurah/DetailSurah.jsx
@@ -11,6 +11,7 @@ const DetailSurah = () => {
   const surahNumber = surahtonumber[id];
 
   const [progressBar, setProgressBar] = useContext(ProgresContext);
+  const [currentBookmark, setCurrentBookmark] = useState(null);
   let propertyStorage = JSON.parse(localStorage.getItem("property")) || [];
 
   const [state, setState] = useState({
@@ -78,17 +79,52 @@ const DetailSurah = () => {
     initProperty();
     checkingStatus();
     getAyat().finally(setProgressBar(false));
+
+    const storedAyah = JSON.parse(localStorage.getItem("ayat"));
+    const storedSurah = localStorage.getItem("url").toLowerCase();
+    if (storedAyah && storedSurah== id) {
+      setCurrentBookmark(storedAyah);
+    }
   }, []);
 
   const copySurat = () => {
     toast.success("Copy Berhasil");
   };
 
   const saveAyat = (url, ayat, namaSurat) => {
-    toast.success("Simpan Berhasil");
     localStorage.setItem("url", numbertosurah[url]);
     localStorage.setItem("ayat", ayat);
     localStorage.setItem("namaSurat", namaSurat);
+
+    const newBookmark = id === currentBookmark ? null : ayat;
+    setCurrentBookmark(newBookmark);
+    toast.custom((t) => (
+      <div
+        className={`${
+          t.visible ? 'animate-enter' : 'animate-leave'
+        } max-w-md w-full bg-white shadow-lg rounded-lg pointer-events-auto flex ring-1 ring-black ring-opacity-5`}
+      >
+        <div className="flex-1 w-0 p-3">
+          <div className="flex items-start">
+            <div className="flex-shrink-0 pt-0.5">
+              <img
+                className=" w-9 rounded-full"
+                src="/public/favicon.ico"
+                alt=""
+              />
+            </div>
+            <div className="ml-3 flex-1">
+              <p className="text-sm font-medium text-gray-900">
+                Ayat Berhasil di Simpan
+              </p>
+              <p className=" text-xs text-gray-500">
+                {namaSurat} : Ayat {ayat}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    ))
   };
 
   const lanjutBaca = [
@@ -147,6 +183,7 @@ const DetailSurah = () => {
         property={propertyStorage}
         setProperty={setProperty}
         numbertosurah={numbertosurah}
+        currentBookmark={currentBookmark}
       />
     </>
   );

diff --git a/src/page/detailSurah/DetailSurahView.jsx b/src/page/detailSurah/DetailSurahView.jsx
@@ -1,6 +1,5 @@
 import { Helmet } from "react-helmet";
 import Navigation from "../../components/Navigation";
-import { Toaster } from "react-hot-toast";
 import CopyToClipboard from "react-copy-to-clipboard";
 
 const DetailSurahView = ({
@@ -18,6 +17,7 @@ const DetailSurahView = ({
   font,
   setFont,
   numbertosurah,
+  currentBookmark,
 }) => {
   return (
     <>
@@ -56,18 +56,17 @@ const DetailSurahView = ({
         loadP={Loading}
         singleSP={dataDetails}
       />
-      <Toaster />
 
       <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">
+        <div className="px-3 lg:px-0 flex flex-nowrap overflow-x-auto hidescroll gap-2 border-b border-slate-300 dark:border-slate-400/80 pb-2 items-end">
           {/* ++ Control Font */}
           <div>
             <label className="label">
               <span className="label-text">Ukuran Arab</span>
             </label>
             <select
               defaultValue={"25"}
-              className="select select-bordered border-slate-700 dark:border-slate-400 select-sm w-full max-w-xs text-slate-800 dark:text-slate-300 bg-white dark:bg-slate-700"
+              className="select select-bordered border-slate-700 dark:border-slate-400 select-sm w-full max-w-xs text-slate-800 dark:text-slate-300 bg-white dark:bg-slate-700 min-w-max"
               onChange={(f1) => setFont({ arab: f1.target.value })}
             >
               <option value="20">Kecil</option>
@@ -82,7 +81,7 @@ const DetailSurahView = ({
             </label>
             <select
               defaultValue={"16"}
-              className="select select-bordered border-slate-700 dark:border-slate-400 select-sm w-full max-w-xs text-slate-800 dark:text-slate-300 bg-white dark:bg-slate-700"
+              className="select select-bordered border-slate-700 dark:border-slate-400 select-sm w-full max-w-xs text-slate-800 dark:text-slate-300 bg-white dark:bg-slate-700 min-w-max"
               onChange={(f2) => setFont({ idn: f2.target.value })}
             >
               <option value="14">Kecil</option>
@@ -98,7 +97,7 @@ const DetailSurahView = ({
             htmlFor="my-modal-3"
             className="btn btn-outline border-slate-700 dark:border-slate-400 btn-sm text-slate-800 dark:text-slate-300 bg-white dark:bg-slate-700"
           >
-            Deskripsi
+            Deskripsi Surah
           </label>
 
           <input type="checkbox" id="my-modal-3" className="modal-toggle" />
@@ -239,7 +238,7 @@ const DetailSurahView = ({
                     className="bi bi-bookmark"
                     viewBox="0 0 16 16"
                   >
-                    <path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5V2zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1H4z" />
+                    {currentBookmark === single.nomor ? <path d="M2 15.5V2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.74.439L8 13.069l-5.26 2.87A.5.5 0 0 1 2 15.5m8.854-9.646a.5.5 0 0 0-.708-.708L7.5 7.793 6.354 6.646a.5.5 0 1 0-.708.708l1.5 1.5a.5.5 0 0 0 .708 0z"/> :  <path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5V2zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1H4z" />}
                   </svg>
                 </button>
               </div>

diff --git a/src/page/homepage/HomeView.jsx b/src/page/homepage/HomeView.jsx
@@ -1,9 +1,7 @@
 import { Helmet } from "react-helmet";
-import { Toaster } from "react-hot-toast";
 import { Link } from "react-router-dom";
 import Footer from "../../components/Footer";
 import LinkProgresBars from "../../lib/LinkProgresBars";
-import { useRef, useState } from "react";
 
 const HomeView = ({
   showBT,
@@ -29,7 +27,6 @@ const HomeView = ({
   try {
     return (
       <div className="min-h-screen">
-        <Toaster />
         {localStorage.removeItem("fromBookmark", false)}
 
         <Helmet>