feat: added dark/light mode (#13)

* feature: added dark/light mode

* Update src/components/Header.jsx

* Update src/App.jsx

---------

Co-authored-by: Dunsin <78784850+Dun-sin@users.noreply.github.com>

Author: Jahkamso

package-lock.json

@@ -16,6 +16,7 @@
     "@tailwindcss/typography": "^0.5.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.0.1",
     "spotify-web-api-node": "^5.0.2"
   },
   "devDependencies": {

package.json

@@ -16,6 +16,7 @@ export const spotifyApi = new SpotifyWebApi({
 
 const App = () => {
   const [isConnected, setIsConnected] = useState(false)
+  const [theme, setTheme] = useState(false)
 
   useEffect(() => {
     const hash = window.location.hash;
@@ -40,8 +41,8 @@ const App = () => {
   }
 
   return (
-    <div className='h-screen flex flex-col gap-10 overflow-hidden'>
-      <Header />
+    <div className={`h-screen flex flex-col gap-10 overflow-hidden transition-all ${theme && ' bg-[#001524] text-white'}`}>
+      <Header theme={theme} setTheme={setTheme} />
       <div className='h-[85%] flex flex-col gap-4 items-center justify-center'>
         {isConnected ? <p className='bg-brand sm:min-w-[40vw] max-w-[500px] min-w-[300px] flex items-center justify-center rounded text-white h-10 cursor-pointer' onClick={logOut}>Logout</p> : <Login />}
         <GeneratePlaylist isConnected={isConnected} logOut={logOut} />

src/App.jsx

@@ -1,16 +1,27 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { Icon } from '@iconify/react'
+import { MdLightMode } from "react-icons/md";
+import { MdDarkMode } from "react-icons/md";
 
-const Header = () => {
+const Header = ({theme, setTheme}) => {
   return (
     <div className='bg-brand flex items-center justify-between p-6 text-white min-h-[5%]'>
       <div className='flex flex-col'>
         <h1 className='font-bold mb-[-6px] text-fmd flex items-center'>HearItFresh<Icon icon="material-symbols:music-note-rounded" width="20" height="20" inline={true} /></h1>
         <p className='text-fsm'>Discover Fresh Tracks that Fit Your Style</p>
       </div>
+      <div className="flex items-center gap-5">
       <a href='https://www.buymeacoffee.com/dunsinCodes' target='_blank' className='bg-yellow-500 h-8 w-28 text-fxs rounded-lg flex items-center justify-center cursor-pointer sm:w-40 font-semibold'>
         Buy Me A Coffee
       </a>
+      <div className='text-xl cursor-pointer' onClick={() => setTheme(prev => !prev)}>
+      {theme ? (
+        <MdLightMode />
+        ) : (
+        <MdDarkMode />
+      )}
+      </div>
+      </div>
     </div>
   )
 }