feat : last reads page added

public/assets/images/Icon ionic-md-musical-notes.svg

@@ -0,0 +1,3 @@
+<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.68594 0V7.20712C2.45651 7.13158 2.20471 7.09241 1.94171 7.09241C0.870131 7.09241 0 7.85061 0 8.92217C0 9.99372 0.870131 10.7435 1.94171 10.7435C3.01329 10.7435 3.88901 9.95455 3.88901 8.81026V3.805H9.54067V7.20712C9.31125 7.13158 9.05944 7.09241 8.79644 7.09241C7.72487 7.09241 6.85474 7.85061 6.85474 8.92217C6.85474 9.99372 7.72487 10.7435 8.79644 10.7435C9.86802 10.7435 10.7437 9.95455 10.7437 8.81026V0H2.68594ZM9.54067 2.68588H3.88901V1.20305H9.54067V2.68588Z" fill="#8B8B8B"/>
+</svg>

src/components/layout/header.tsx

@@ -20,7 +20,7 @@ const Header = () => {
                 <Link href={"/about"}>About us</Link>
               </li>
               <li className="h-full flex items-center border-[#F4846F] hover:border-b hover:text-[#EB6E57] ">
-                <Link href={"#"}>Last Read</Link>
+                <Link href={"/last-reads"}>Last Read</Link>
               </li>
             </ul>
           </div>

src/components/sidebar/list.tsx

@@ -5,6 +5,7 @@ import categoryImage from "../../../public/assets/images/Group 27009.svg";
 import DayContainer from "../../../public/assets/images/Vector.svg";
 import Folder from "../../../public/assets/images/Inner Plugin Iframe.svg";
 import NoData from "../../../public/assets/images/Frame 1000005074.svg";
+import Audio from "../../../public/assets/images/Icon ionic-md-musical-notes.svg";
 import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 import colorizeVowels from "../utils/colorize-vowels";
@@ -27,12 +28,14 @@ interface Dua {
 interface ListProps {
   tab: string;
   path: { name: string; type: string; data?: Category[] }[];
-  setPath: React.Dispatch<React.SetStateAction<{ name: string; type: string; data?: Category[] }[]>>;
+  setPath: React.Dispatch<
+    React.SetStateAction<{ name: string; type: string; data?: Category[] }[]>
+  >;
+  data: any; // Adjust this type as needed
+  setData: React.Dispatch<React.SetStateAction<any>>; // Adjust this type as needed
 }
 
-
-
-const List: React.FC<ListProps> = ({ tab, path, setPath , data, setData }) => {
+const List: React.FC<ListProps> = ({ tab, path, setPath, data, setData }) => {
   const [loading, setLoading] = useState<boolean>(false);
   const router = useRouter();
   const [lastReads, setLastReads] = useLocalStorage("last-read", []);
@@ -41,6 +44,40 @@ const List: React.FC<ListProps> = ({ tab, path, setPath , data, setData }) => {
     weekday: "long",
   }).format(today);
 
+  // Mapping of days of the week to their respective Dhikr phrases with vowels and English translations
+  const dhikrMap: { [key: string]: { dhikr: string; english: string } } = {
+    Saturday: {
+      dhikr: "یَا رَبِّ الْعالَمِین",
+      english: "O Lord of the Worlds",
+    },
+    Sunday: {
+      dhikr: "یَا ذَا الْجَلاَلِ وَ الْاِکْرَامِ",
+      english: "O Lord of Glory and Honor",
+    },
+    Monday: {
+      dhikr: "یَا قَاضِیَ الْحَاجَاتِ",
+      english: "O the Judge of needs",
+    },
+    Tuesday: {
+      dhikr: "یَا أَرْحَمَ الرَّاحِمِین",
+      english: "O Most Merciful of all givers",
+    },
+    Wednesday: {
+      dhikr: "یَا حَیُّ یَا قَیُّومُ",
+      english: "O Ever-Living, O Sustainer",
+    },
+    Thursday: {
+      dhikr: "لَا إِلٰهَ إِلَّا اللَّهُ الْمَلِکُ الْحَقُّ الْمُبِینُ",
+      english:
+        "There is no god but Allah, the Sovereign, the True, the Manifest",
+    },
+    Friday: {
+      dhikr: "اللّهُمّ صَلِّ عَلَى مُحَمَّدٍ وَ آلِ مُحَمَّدٍ",
+      english:
+        "O Allah, send blessings upon Muhammad and the family of Muhammad",
+    },
+  };
+
   const openCategory = (category: Category) => {
     setData({ type: "children", data: category.children });
     setPath((prev) => [
@@ -50,11 +87,8 @@ const List: React.FC<ListProps> = ({ tab, path, setPath , data, setData }) => {
   };
 
   const openDua = (dua: Dua) => {
-    setPath((prev) => [
-      ...prev,
-      { name: dua.name, type: "dua" },
-    ]);
-    setLastReads((prev)=>[...prev , dua])
+    setPath((prev) => [...prev, { name: dua.name, type: "dua" }]);
+    setLastReads((prev) => [...prev, dua]);
     const slug = dua.title.toLowerCase().replaceAll(" ", "-");
     router.push(`/duas/${slug}-${dua.id}`);
   };
@@ -81,7 +115,7 @@ const List: React.FC<ListProps> = ({ tab, path, setPath , data, setData }) => {
       const filteredData = data.data.filter((item: any) => !item.title); // Exclude objects with a "title"
 
       filteredData.forEach((category: Category) => {
-        const hasDua = category.children.filter((item: any) => !item.title)
+        const hasDua = category.children.filter((item: any) => !item.title);
 
         http.get(`web/mafatih-duas/?category=${category.id}`).then((res) => {
           const duas = res.data.results;
@@ -100,7 +134,9 @@ const List: React.FC<ListProps> = ({ tab, path, setPath , data, setData }) => {
   if (loading) {
     return <p>Loading ...</p>;
   }
-console.log(data);
+
+  const currentDhikr = dhikrMap[dayOfWeek]?.dhikr || "";
+  const currentEnglish = dhikrMap[dayOfWeek]?.english || "";
 
   return (
     <div>
@@ -124,12 +160,10 @@ console.log(data);
               </div>
 
               <div className="text-2xl mt-1 text-[#292524] font-[UthmanTaha] mb-2 leading-relaxed">
-                {colorizeVowels("یا أَرْحَمَ الرَّاحِمِین")}
+                {colorizeVowels(currentDhikr)}
               </div>
 
-              <p className="text-sm text-[#8B8B8B]">
-                O Most Merciful of all givers
-              </p>
+              <p className="text-sm text-[#8B8B8B]">{currentEnglish}</p>
             </div>
           </div>
         </div>
@@ -147,7 +181,12 @@ console.log(data);
                 onClick={() => openCategory(category)}
               >
                 <div className="flex items-center gap-2">
-                  <Image src={categoryImage} width={24} height={24} alt="category" />
+                  <Image
+                    src={categoryImage}
+                    width={24}
+                    height={24}
+                    alt="category"
+                  />
                   <p>{category.name}</p>
                 </div>
                 <p>{category.children.length}</p>
@@ -180,6 +219,11 @@ console.log(data);
                 <div className="flex items-center gap-2">
                   <p>{dua.title}</p>
                 </div>
+                {dua.not_synced && (
+                  <div className="flex items-center p-3 bg-[#EBEBEB] rounded-lg">
+                    <Image src={Audio} alt="audio available " />
+                  </div>
+                )}
               </div>
             );
           }

src/pages/last-reads.tsx

@@ -0,0 +1,54 @@
+import Image from "next/image";
+import { useEffect, useState } from "react";
+import Audio from "../../public/assets/images/Icon ionic-md-musical-notes.svg";
+import { useRouter } from "next/router";
+
+const LastReads = () => {
+    const [lastDuas , setLastDuas] = useState([])
+    const router = useRouter()
+
+    const openDua = (dua: Dua) => {
+        setPath((prev) => [...prev, { name: dua.name, type: "dua" }]);
+        setLastReads((prev) => [...prev, dua]);
+        const slug = dua.title.toLowerCase().replaceAll(" ", "-");
+        router.push(`?dua=${slug}-${dua.id}`);
+      };
+
+      
+
+    useEffect(()=>{
+        const local = JSON.parse(localStorage.getItem("last-read"))
+        setLastDuas(local)
+    } , [])
+    console.log(lastDuas);
+    
+  return (
+    <aside
+      className={`w-full h-[calc(100vh-55px)] self-start overflow-auto  rounded-3xl p-6 lg:max-w-[430px] lg:bg-[#F5F5F5] 
+        }`}
+    >
+        {lastDuas?.map((dua : {id : string | number , title : string , not_synced : boolean})=>(
+      <div
+        className="flex justify-between p-3 bg-white my-4 rounded-2xl"
+        key={dua.id}
+        onClick={() => openDua(dua)}
+      >
+        <div className="flex items-center gap-2">
+          <p>{dua.title}</p>
+        </div>
+        {dua.not_synced && (
+          <div className="flex items-center p-3 bg-[#EBEBEB] rounded-lg">
+            <Image src={Audio} alt="audio available" />
+          </div>
+        )}
+      </div>
+
+        ))}
+    </aside>
+  );
+};
+
+export default LastReads;
+
+// ${
+//   slug && "hidden lg:block"