Added light mode and volume feature

src/App.jsx

@@ -9,7 +9,7 @@ const App = () => {
   const {audioRef, track, next, play } = useContext(PlayerContext);
   return (
     <>
-    <div className='h-screen w-screen bg-[#121212]'>
+    <div className='h-screen w-screen bg-[#E0E0E0] dark:bg-[#121212]'>
       <div className='lg:h-[85%] h-[83%] w-full flex'>
         <Sidebar />
         <Display />

src/assets/assets.js

@@ -126,9 +126,9 @@ export const audios = [{
 },
 {
     name: "Ishq Murshid",
-    filePath: "src/assets/ishq.mp3",
+    filePath: "src/assets/ishqmurshid.mp3",
     fileType: "song",
-    image: "src/assets/ishq.jpg",
+    image: "src/assets/ishqmurshid.jpg",
     link: "https://youtu.be/wyC_IVVy_yE?si=SOfgJ_cQVRdN2pfh",
     duration: "02:32",
     id: 14,
@@ -179,183 +179,30 @@ export const audios = [{
     id: 19,
 },
 {
-    name: "Asma-ul-Husna",
-    filePath: "src/assets/asmaulhasna.mp3",
-    fileType: "nasheed",
-    image: "src/assets/asmaulhasnacover.jpg",
-    link: "https://youtu.be/e-KygsbNVGk?si=XKPRQTUK5jdW6Qa0",
-    duration: "03:36",
+    name: "Bye Bye Bye",
+    filePath: "src/assets/bye.mp3",
+    fileType: "song",
+    image: "src/assets/bye.jpg",
+    link: "https://youtu.be/Eo-KmOd3i7s?si=PWlZ6tOIYfeW-V4j",
+    duration: "03:14",
     id: 20,
 },
 {
-    name: "Ya Ilahi",
-    filePath: "src/assets/ilahi.mp3",
-    fileType: "nasheed",
-    image: "src/assets/ilahicover.jpg",
-    link: "https://youtu.be/17PmZ_41SG8?si=IPuGAjyvcBCFOlti",
-    duration: "04:40",
+    name: "Taras",
+    filePath: "src/assets/taras.mp3",
+    fileType: "song",
+    image: "src/assets/taras.jpg",
+    link: "https://youtu.be/kfXy4W0aD40?si=3X_NCkbRV1z-mkg_",
+    duration: "02:29",
     id: 21,
 },
 {
-    name: "PALESTINE",
-    filePath: "src/assets/palestine.mp3",
-    fileType: "nasheed",
-    image: "src/assets/palestine.jpg",
-    link: "https://youtu.be/FD1ZISZJJzk?si=TLgUxDKGI9WObpLL",
-    duration: "03:43",
-    id: 22,
-},
-{
-    name: "The Way Of Tears",
-    filePath: "src/assets/wayoftears.mp3",
-    fileType: "nasheed",
-    image: "src/assets/wayoftearscover.jpg",
-    link: "https://youtu.be/YiSQ_db-Dcw",
-    duration: "05:33",
-    id: 23,
-},
-{
-    name: "Forgive Me ALLAH",
-    filePath: "src/assets/astagfirullah.mp3",
-    fileType: "nasheed",
-    image: "src/assets/astagfirullah.jpg",
-    link: "https://youtu.be/caeTvZrlVTo",
-    duration: "03:38",
-    id: 24,
-},
-{
-    name: "Without You",
-    filePath: "src/assets/without.mp3",
-    fileType: "nasheed",
-    image: "src/assets/withoutcover.jpg",
-    link: "https://youtu.be/WRW8ao2AtDU?si=2oGzZF2YiUY8GgGc",
+    name: "Ishq",
+    filePath: "src/assets/ishq.mp3",
+    fileType: "song",
+    image: "src/assets/ishq.jpg",
+    link: "https://youtu.be/hHuG7FIKgtc?si=6CG-d9IWq8ay03KE",
     duration: "03:02",
-    id: 25,
-},
-{
-    name: "Ya Adheeman",
-    filePath: "src/assets/adheeman.mp3",
-    fileType: "nasheed",
-    image: "src/assets/adheeman.jpg",
-    link: "https://youtu.be/71hi9H6fZuc",
-    duration: "05:05",
-    id: 26,
-},
-{
-    name: "Al Hamdulillah",
-    filePath: "src/assets/alhamdulillah.mp3",
-    fileType: "nasheed",
-    image: "src/assets/alhamdulillah.jpg",
-    link: "https://youtu.be/mD81D8o8cMs",
-    duration: "02:53",
-    id: 27,
-},
-{
-    name: "Liyakun Yawmuka",
-    filePath: "src/assets/liyakun.mp3",
-    fileType: "nasheed",
-    image: "src/assets/liyakun.jpg",
-    link: "https://youtu.be/7hewSKpkgSM",
-    duration: "02:47",
-    id: 28,
-},
-{
-    name: "Soldiers of ALLAH",
-    filePath: "src/assets/jundullah.mp3",
-    fileType: "nasheed",
-    image: "src/assets/jundullahcover.jpg",
-    link: "https://youtu.be/Dy4YSBA6P5Q?si=0DZDZSP59ef6n0ZT",
-    duration: "04:22",
-    id: 29,
-},
-{
-    name: "Qalu Innaha Waad",
-    filePath: "src/assets/promise.mp3",
-    fileType: "nasheed",
-    image: "src/assets/promisecover.jpg",
-    link: "https://youtu.be/Gqxyvee566M?si=_Xc23IZNj6y-Ng9y",
-    duration: "02:44",
-    id: 30,
-},
-{
-    name: "Beauty of Existence",
-    filePath: "src/assets/beauty.mp3",
-    fileType: "nasheed",
-    image: "src/assets/beauty.jpg",
-    link: "https://youtu.be/NrsCej6SVxM",
-    duration: "04:21",
-    id: 31,
-},
-{
-    name: "My Hope (ALLAH)",
-    filePath: "src/assets/hope.mp3",
-    fileType: "nasheed",
-    image: "src/assets/hope.jpg",
-    link: "https://youtu.be/slkyMimmb1M",
-    duration: "04:52",
-    id: 32,
-},
-{
-    name: "I Rise",
-    filePath: "src/assets/rise.mp3",
-    fileType: "nasheed",
-    image: "src/assets/rise.jpg",
-    link: "https://youtu.be/JqGv0EdJdJI",
-    duration: "04:26",
-    id: 33,
-},
-{
-    name: "Love & Life",
-    filePath: "src/assets/lovelife.mp3",
-    fileType: "nasheed",
-    image: "src/assets/lovelife.jpg",
-    link: "https://youtu.be/sI5waj84X8Q",
-    duration: "02:35",
-    id: 34,
-},
-{
-    name: "Believer",
-    filePath: "src/assets/believer.mp3",
-    fileType: "nasheed",
-    image: "src/assets/believer.jpg",
-    link: "https://youtu.be/UA-IfwyOBcg",
-    duration: "03:44",
-    id: 35,
-},
-{
-    name: "Taweel Al Shawq",
-    filePath: "src/assets/taweel.mp3",
-    fileType: "nasheed",
-    image: "src/assets/taweel.jpg",
-    link: "https://youtu.be/o2W8_mvLuxU?si=kXR2gRMcIxvE6VfY",
-    duration: "05:38",
-    id: 36,
-},
-{
-    name: "Aroosah",
-    filePath: "src/assets/aroosah.mp3",
-    fileType: "nasheed",
-    image: "src/assets/aroosah.jpg",
-    link: "https://youtu.be/QG2lY-wFrv4?si=eqJnsrBPxQ1OAjyJ",
-    duration: "02:59",
-    id: 37,
-},
-{
-    name: "Ya Quluban",
-    filePath: "src/assets/quluban.mp3",
-    fileType: "nasheed",
-    image: "src/assets/quluban.jpg",
-    link: "https://youtu.be/WsRwfLLbHvc?si=tiRPKYXQ1gUbJtuH",
-    duration: "03:10",
-    id: 38,
-},
-{
-    name: "Hasn't Death Called You",
-    filePath: "src/assets/death.mp3",
-    fileType: "nasheed",
-    image: "src/assets/death.jpg",
-    link: "https://youtu.be/i6dBNToNZ9o?si=rVvaUBkUBHfV5N22",
-    duration: "04:02",
-    id: 39,
+    id: 22,
 },
 ];

src/components/Acapella.jsx

@@ -8,10 +8,10 @@ const Acapella = ({ name, duration, image, id }) => {
         <div onClick={async ()=> {
             await playWithId(id);
             play();
-        }} className='min-w-[180px] p-2 px-3 rounded cursor-pointer hover:bg-[#ffffff26]'>
+        }} className='min-w-[180px] max-w-[180px] p-2 rounded cursor-pointer hover:bg-[#ffffff26]'>
             <img className='rounded' src={image} alt="" />
-                <p className='font-bold mt-2 text-white'>{name}</p>
-                <p className='font-normal text-slate-200 mt-2 text-xs'>{duration}</p>
+                <p className='font-bold mt-2 text-[#121212] dark:text-white'>{name}</p>
+                <p className='font-normal text-[#646464] dark:text-slate-200 mt-2 text-xs'>{duration}</p>
         </div>
     )
 }

src/components/DisplayHome.jsx

@@ -1,22 +1,27 @@
 import React from 'react'
 import { audios } from '../assets/assets'
 import Acapella from './Acapella'
+import { useContext } from 'react'
+import { PlayerContext } from '../context/PlayerContext'
 
 const DisplayHome = () => {
+    const {search} = useContext(PlayerContext)
     return (
         <>
             <div className='p-3'>
-                <h1 className='text-2xl font-bold mb-3 text-white'>Top Picks</h1>
-                <div className='flex items-center gap-3'>
+                <h1 className='text-2xl font-bold mb-3 text-[#121212] dark:text-white'>Top Picks</h1>
+                <div className='flex items-center gap-1'>
                     <svg onClick={()=>{
                         document.getElementById('topPicks').scrollLeft -= 350
-                    }} className='cursor-pointer' xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#e8eaed"><path d="m480-320 56-56-64-64h168v-80H472l64-64-56-56-160 160 160 160Zm0 240q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" /></svg>
+                    }} className='cursor-pointer dark:fill-[#e8eaed] fill-[#121212]' xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" ><path d="m480-320 56-56-64-64h168v-80H472l64-64-56-56-160 160 160 160Zm0 240q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" /></svg>
                     <div className='flex overflow-auto flex-1 scroll-smooth' id='topPicks'>
-                        {audios.map((item, index) => (<Acapella key={index} name={item.name} duration={item.duration} image={item.image} id={item.id}/>))}
+                        {audios.filter((item)=>{
+                            return search.toLowerCase() === ''? item : item.name.toLowerCase().includes(search);
+                        }).map((item, index) => (<Acapella key={index} name={item.name} duration={item.duration} image={item.image} id={item.id}/>))}
                     </div>
                     <svg onClick={()=>{
                         document.getElementById('topPicks').scrollLeft += 350
-                    }} className='cursor-pointer' xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#e8eaed"><path d="m480-320 160-160-160-160-56 56 64 64H320v80h168l-64 64 56 56Zm0 240q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" /></svg>
+                    }} className='cursor-pointer dark:fill-[#e8eaed] fill-[#121212]' xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" ><path d="m480-320 160-160-160-160-56 56 64 64H320v80h168l-64 64 56 56Zm0 240q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" /></svg>
                 </div>
             </div>
         </>

src/components/Navbar.jsx

@@ -1,69 +1,76 @@
-import React from "react";
+import React, { useContext } from "react";
+import { PlayerContext } from "../context/PlayerContext";
 
 const Navbar = () => {
+    const {setTheme, darkStatus, setDark, search, setSearch} = useContext(PlayerContext);
     return (
         <>
             <div className="w-full h-[13%] flex items-center p-3 border-b border-b-zinc-800">
                 <div className="h-full lg:hidden flex gap-2 justify-center items-center">
                     <div className="h-full flex justify-center items-center cursor-pointer">
                         <img className="h-9 w-9" src="src/assets/logo.png" alt="logo" />
                     </div>
-                    <div className="h-full text-white text-4xl font-sans font-extrabold flex justify-center items-center cursor-pointer">
+                    <div className="h-full dark:text-white text-[#121212] text-4xl font-sans font-extrabold flex justify-center items-center cursor-pointer">
                         Acapellas
                     </div>
                 </div>
                 <div className="lg:flex hidden justify-center items-center gap-3">
                     <svg
-                        className="cursor-pointer"
+                        className="cursor-pointer fill-[#121212] dark:fill-[#e8eaed]"
                         xmlns="http://www.w3.org/2000/svg"
                         height="24px"
                         viewBox="0 -960 960 960"
                         width="24px"
-                        fill="#e8eaed"
                     >
                         <path d="M640-80 240-480l400-400 71 71-329 329 329 329-71 71Z" />
                     </svg>
                     <svg
-                        className="cursor-pointer"
+                        className="cursor-pointer fill-[#121212] dark:fill-[#e8eaed]"
                         xmlns="http://www.w3.org/2000/svg"
                         height="24px"
                         viewBox="0 -960 960 960"
                         width="24px"
-                        fill="#e8eaed"
                     >
                         <path d="m321-80-71-71 329-329-329-329 71-71 400 400L321-80Z" />
                     </svg>
                 </div>
                 <div className="flex-1 flex justify-center items-center">
                     <label htmlFor="search"></label>
                     <input
-                        className="text-center text-white text-base font-sans lg:w-[50%] w-[75%] h-9 bg-[#282828] rounded-full flex justify-center items-center"
+                        onChange={(e)=>setSearch(e.target.value)}
+                        className="text-center text-white text-base font-sans lg:w-[50%] w-[75%] h-9 bg-[#708090] dark:bg-[#282828] rounded-full flex justify-center items-center"
                         type="search"
                         id="search"
                         placeholder="Search"
                     />
                 </div>
                 <div className="flex justify-center items-center gap-3">
-                    <svg
-                        className="cursor-pointer"
+                    {darkStatus?<svg
+                        onClick={()=>{
+                            setDark(false);
+                            setTheme('light');
+                        }}
+                        className="cursor-pointer fill-[#121212] dark:fill-[#e8eaed]"
                         xmlns="http://www.w3.org/2000/svg"
                         height="24px"
                         viewBox="0 -960 960 960"
                         width="24px"
-                        fill="#e8eaed"
                     >
                         <path d="M480-360q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Zm0 80q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM200-440H40v-80h160v80Zm720 0H760v-80h160v80ZM440-760v-160h80v160h-80Zm0 720v-160h80v160h-80ZM256-650l-101-97 57-59 96 100-52 56Zm492 496-97-101 53-55 101 97-57 59Zm-98-550 97-101 59 57-100 96-56-52ZM154-212l101-97 55 53-97 101-59-57Zm326-268Z" />
                     </svg>
-                    <svg
-                        className="cursor-pointer"
+                    :<svg
+                        onClick={()=>{
+                            setDark(true);
+                            setTheme('dark');
+                        }}
+                        className="cursor-pointer fill-[#121212] dark:fill-[#e8eaed]"
                         xmlns="http://www.w3.org/2000/svg"
                         height="24px"
                         viewBox="0 -960 960 960"
                         width="24px"
-                        fill="#e8eaed"
                     >
                         <path d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q14 0 27.5 1t26.5 3q-41 29-65.5 75.5T444-660q0 90 63 153t153 63q55 0 101-24.5t75-65.5q2 13 3 26.5t1 27.5q0 150-105 255T480-120Zm0-80q88 0 158-48.5T740-375q-20 5-40 8t-40 3q-123 0-209.5-86.5T364-660q0-20 3-40t8-40q-78 32-126.5 102T200-480q0 116 82 198t198 82Zm-10-270Z" />
-                    </svg>
+                    </svg>}
                 </div>
             </div>
         </>