add all qari and salat time loaction filler option

.firebase/hosting.ZGlzdA.cache

@@ -1,12 +1,11 @@
-404.png,1701798433482,faa8a7081c307c4aebf4040d58297c35e53bbe36ea1c0672ebb9b16d70ddfb87
-favicon.ico,1703403210000,3ef54200b11160280d9ffe3f80fa91c9ba259364d337eaf853bce3ba20698071
-tawheed.png,1706790530451,3fd82bed41cf5d587139d4425af07773d30fbaed50f78152c9191f9c9e3a75ce
 vite.png,1703403210000,c7e8b220c2ad5d70459bcbabf1023fbc4d4730c057a55724c48eac987fc8580b
-index.html,1711279491104,c5902b25c16f2b0cc8a9caa70ff2327ab4124d9a580088c8a4fe928385747c47
-assets/html2canvas-CBHES5Bc.js,1711279491104,420437c71607ff0fd68a2951acf9ee7833f75eb32769035609245a26a0536de1
-assets/purify.es-BZcJlXyC.js,1711279491106,2a0b4acf81d951ac70b052a34b3a38af17f1560bca447431c5111fb4cc4e5ab5
-assets/vite-CXBKpRo0.png,1711279491092,c7e8b220c2ad5d70459bcbabf1023fbc4d4730c057a55724c48eac987fc8580b
-assets/index-DvNWsjqz.css,1711279491104,eef0d91bb4109191135e7c5d167dc7f20e49c8a3b93b98585d543e16ef80ced5
-assets/index.es-DMCnn5Fi.js,1711279491107,0dc9d3112bd76b646f8a7354605ee1cb566963ffc47b5d6dcfacf32e2075db41
-assets/404-BdmjsMXD.png,1711279491093,faa8a7081c307c4aebf4040d58297c35e53bbe36ea1c0672ebb9b16d70ddfb87
-assets/index-SVtEZdxl.js,1711279491108,0b8198be0ad251db37f3d346d60d24711f9ff9535025e57f69dec8f8ea7bb1ae
+tawheed.png,1706790530451,3fd82bed41cf5d587139d4425af07773d30fbaed50f78152c9191f9c9e3a75ce
+favicon.ico,1703403210000,3ef54200b11160280d9ffe3f80fa91c9ba259364d337eaf853bce3ba20698071
+404.png,1701798433482,faa8a7081c307c4aebf4040d58297c35e53bbe36ea1c0672ebb9b16d70ddfb87
+index.html,1729869627986,f27998634f7f45ac808d89084541c4248f41689205aab55d819fa6a4e9b9f198
+assets/purify.es-BZcJlXyC.js,1729869627986,2a0b4acf81d951ac70b052a34b3a38af17f1560bca447431c5111fb4cc4e5ab5
+assets/html2canvas-z-DZaOsF.js,1729869627986,9500ec8a05aa5bb0dff0c1ee2498164d215cb708da6ef4ec8de1c0298fded671
+assets/index-BBioUny3.css,1729869627986,f36a689fafd4ae68bdd49abf0b507f04607ea8f0869eb51eb06f39fafa535a74
+assets/index.es-B-vZ23tE.js,1729869627986,9efdbe75c02652f580877ab6711e7a9e2079db96fada795be0560f22c50e03b8
+assets/404-BdmjsMXD.png,1729869627980,faa8a7081c307c4aebf4040d58297c35e53bbe36ea1c0672ebb9b16d70ddfb87
+assets/index-Bim2jItj.js,1729869627988,c30a4354a840d4e54249c37d13e3ac7f944b74c159a3b41a333d46f57e3b7172

README.md

@@ -1,3 +1,7 @@
+# Update: 
+firebase deploy --only hosting:target-name
+
+
 #  LIVE LINK:  [Tawheed](https://taw-heed.web.app/)
 
 #  Home Page -

src/App.jsx

@@ -9,6 +9,7 @@ import MainHadis from "./component/Hadis/MainHadis";
 import HadisAllbook from "./component/Hadis/HadisAllbook";
 import HadisSection from "./component/Hadis/HadisSection";
 import Singlehadis from "./component/Hadis/Singlehadis";
+import Qari from "./component/Alquran/Qari";
 
 function App() {
 
@@ -19,8 +20,10 @@ function App() {
 
       <Routes >
         <Route path="/" element={<Home />} />
-        <Route path="/alquran" element={<Alquran />} />
-        <Route path="/alquran/:id" element={<Sura />} />
+        <Route path="/qari/:id" element={<Alquran />} />
+        <Route path="/qari" element={<Qari />} />
+
+        <Route path="/qari/:qari/alquran/:id" element={<Sura />} />
         <Route path="/hadis" element={<MainHadis />} />
         <Route path="/hadis/:name" element={<HadisAllbook />} />
         <Route path="/hadis/:name/:id" element={<Singlehadis />} />

src/component/Alquran/AudioPlayer.jsx

@@ -16,6 +16,7 @@ import {
 import { IoChevronUpCircleOutline } from 'react-icons/io5';
 import { Link } from 'react-router-dom';
 import { document } from 'postcss';
+import Downloader from '../Downloader';
 
 // ================================================
 const AudioPlayer = ({ audioUrl, num, id }) => {
@@ -161,7 +162,9 @@ const AudioPlayer = ({ audioUrl, num, id }) => {
 
   return (
     <div className='flex  justify-center items-center flex-col bg ring-deep-purple-400 w-full'>
-
+      {
+        audioUrl ? console.log('audio', audioUrl) : console.log('none')
+      }
       <audio ref={audioRef} src={audioUrl} preload="metadata" />
       <div className='w-full flex items-center justify-center'>
         <div>
@@ -261,9 +264,12 @@ const AudioPlayer = ({ audioUrl, num, id }) => {
 
                 <MenuList className="flex flex-col gap-2">
 
-                  <MenuItem onClick={handleDownload} className='flex justify-between'>
+                  <MenuItem className='flex justify-between'>
+
+                    {/* <h1>Download</h1> */}
+                    <Downloader fileName={'tanvir.mp3'} url={audioUrl} />
+                    {/* <a href={`${audioUrl}`} download>Test Download</a> */}
 
-                    <h1>Download</h1>
                     <FaDownload />
 
                   </MenuItem>
@@ -332,15 +338,3 @@ const AudioPlayer = ({ audioUrl, num, id }) => {
 export default AudioPlayer;
 
 
-
-
-
-
-
-
-
-
-
-
-
-

src/component/Alquran/Qari.jsx

@@ -0,0 +1,48 @@
+import React, { useState } from 'react';
+import Qaris from '../../qari.json';
+import { Link } from 'react-router-dom';
+
+const Qari = () => {
+    const [searchQuery, setSearchQuery] = useState('');
+
+    // Filter the Qaris based on the search query
+    const filteredQaris = Qaris.filter(qari =>
+        qari.name.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+
+    return (
+        <div className='flex justify-center items-center flex-col gap-5'>
+            <div className='flex justify-center w-full'>
+                <div className='dark:bg-[#fffefe3a] bg-[#bab5b549] rounded-tl-full rounded-bl-full flex justify-between items-center p-2 px-4 md:w-1/2 w-2/3 gap-6'>
+                    <div className='flex gap-4 items-center text-2xl overflow-hidden'>
+                        <input
+                            type="text"
+                            className='w-screen bg-transparent border-none focus:outline-none text-white'
+                            placeholder="Search Qari"
+                            value={searchQuery}
+                            onChange={(e) => setSearchQuery(e.target.value)} // Update search query on input change
+                        />
+                    </div>
+                </div>
+                <button className='bg-[#1d4ed8] text-white px-3 rounded-tr-full rounded-br-full'>
+                    Search
+                </button>
+            </div>
+
+            <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 text-white gap-3 justify-items-center items-center w-full'>
+                {filteredQaris?.map(item => (
+                    <Link key={item.id} to={`${item.id}`}>
+                        <div className={`flex text-white w-[22rem] lg:w-96 p-3 gap-3 bg-grayr hover:bg-grayh rounded-md justify-start items-center cursor-pointer hover:scale-105 duration-200`}>
+                            <div className='flex justify-center items-center w-11 h-11 p-1 rounded-full border-2'>
+                                <h1>{item.id}</h1>
+                            </div>
+                            <h2>{item.name}</h2>
+                        </div>
+                    </Link>
+                ))}
+            </div>
+        </div>
+    );
+};
+
+export default Qari;

src/component/Alquran/Sura.jsx

@@ -14,6 +14,7 @@ import { Tabs } from '@material-tailwind/react';
 
 const Sura = () => {
     const { id } = useParams()
+    const { qari } = useParams()
     const [sura, Setsura] = useState();
     useEffect(() => {
         fetch(`https://api.alquran.cloud/v1/surah/${id}/ar.alafasy`)
@@ -70,18 +71,46 @@ const Sura = () => {
     const [activeTab, setActiveTab] = useState("Arabi");
 
     // ________________________________________________________
+
+
+
+    // const getAudioUrl = (url) => {
+    //     fetch(url)
+    //         .then(res => res.json())
+    //         .then(data => console.log(data.audio_url))
+    // }
+    const [audioUrl, setAudioUrl] = useState(null);
+    useEffect(() => {
+        fetch(`https://api.quran.com/api/v4/chapter_recitations/${qari}/${id}`)
+            .then(res => res.json())
+            .then(data => {
+                setAudioUrl(data.audio_file?.audio_url)
+
+            })
+    }, [id, qari])
+
+
+
+
+
+
+
+
+
+
     return (
         <div className='text-white  min-h-screen px-4'>
             {
                 sura ?
                     <div className='relative'>
+
                         <div className='text-center'>
                             <h1 className='text-3xl'>{sura.englishName}</h1>
                             <h1 className='text-2xl'>{sura.name}</h1>
                             <h1>{sura.revelationType} - {sura.numberOfAyahs}</h1>
                         </div>
                         <div className='flex justify-between items-center'>
-                            <Link to="/alquran">
+                            <Link to={`/qari/${qari}`}>
                                 <div className='flex items-center text-2xl cursor-pointer'>
                                     <IoCaretBackOutline />
                                 </div>
@@ -139,7 +168,8 @@ const Sura = () => {
 
                                 {
 
-                                    activeTab == "Arabi" && <AudioPlayer audioUrl={`https://download.quranicaudio.com/qdc/mishari_al_afasy/murattal/${sura.number}.mp3`} num={1} id={id} />
+                                    activeTab == "Arabi" && <AudioPlayer audioUrl={audioUrl} num={1} id={id} />
+
 
 
                                 }

src/component/Downloader.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+const Downloader = ({ url, fileName }) => {
+    const downloadFile = async () => {
+        try {
+
+            const response = await fetch(url);
+
+            if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+
+            const blob = await response.blob();
+            const link = document.createElement('a');
+            const fileURL = window.URL.createObjectURL(blob);
+            link.href = fileURL;
+            link.download = fileName || 'audio.mp3';
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+            window.URL.revokeObjectURL(fileURL);
+        } catch (error) {
+            console.error("File download failed:", error);
+        }
+    };
+
+    return (
+        <button onClick={downloadFile} className="bg-blue-500 text-white px-4 py-2 rounded-md">
+            Download File
+        </button>
+    );
+};
+
+export default Downloader;

src/component/Hero.jsx

@@ -57,11 +57,29 @@ const Hero = () => {
     const [open, setOpen] = useState(false);
     const [location, setLocation] = useState('Dhaka');
     const [custom, setCustom] = useState('');
-    const [location2, setLocation2] = useState('');
+    const [location2, setLocation2] = useState(localStorage.getItem('sTime') ? localStorage.getItem('sTime') : 'Dhaka');
+
+
+    const [filterText, setFilterText] = useState(""); // State to store input value
+
+
+
+    // Function to handle input change for filtering
+    const handleInputChange = (e) => {
+        setFilterText(e.target.value.toLowerCase()); // Convert to lowercase for case-insensitive filtering
+    };
+
+    // Function to filter and dynamically fill options
+    const filteredOptions = fack.filter((e) =>
+        e.name.toLowerCase().includes(filterText)
+    );
+
 
     const handleOpen = () => setOpen(!open);
     const selectvlue = (e) => {
         setLocation2(e)
+        console.log(e);
+
     }
     const Update = () => {
         if (custom == "") {
@@ -250,10 +268,22 @@ const Hero = () => {
                                             :
 
                                             <Select label="Select Location"
-                                                onChange={selectvlue}
-                                                required>
+                                                className="text-black"
+                                                value="lk"
+                                                onChange={(e) => selectvlue(e)}
+                                            >
+                                                <div className="mt-4 text-sm text-gray-400">
+                                                    Selected Location: {location2 || "None"}
+                                                </div>
+                                                <input
+                                                    type="text"
+                                                    className="mb-4 p-2 border border-gray-300 rounded w-full"
+                                                    placeholder="Filter locations"
+                                                    onChange={handleInputChange}
+                                                    value={filterText}
+                                                />
                                                 {
-                                                    fack.map((e) => <Option key={e.id} value={e.name}>{e.name}</Option>)
+                                                    filteredOptions.map((e) => <Option key={e.id} value={e.name}>{e.name}</Option>)
                                                 }
                                             </Select>
 
@@ -270,6 +300,10 @@ const Hero = () => {
                                     </Button>
                                 </DialogFooter>
                             </Dialog>
+
+
+
+
                         </>
                     </p>
                 </div>

src/component/MainHome.jsx

@@ -6,6 +6,7 @@ import { TypeAnimation } from 'react-type-animation';
 const MainHome = () => {
     return (
         <div className='h-screen flex justify-center items-center flex-col max-w-2xl m-auto text-center text-white '>
+
             <TypeAnimation
                 sequence={[
                     'TAWHEED',

src/component/NavListMenu.jsx

@@ -31,7 +31,7 @@ const navListMenuItems = [
         title: "Al-Quran",
         description: "Find the perfect solution for your needs.",
         icon: GiBookmarklet,
-        link: "/alquran",
+        link: "/qari",
     },
     {
         title: "Hadis",