side bar menu added

mzamann1 · Oct 4, 2022 · 9e97740 · 9e97740
1 parent 9dba77a
commit 9e97740
Show file tree

Hide file tree

Showing 20 changed files with 227 additions and 302 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -3,64 +3,64 @@ module.exports = {
     browser: true,
     es2021: true,
   },
-  extends: ['plugin:react/recommended', 'airbnb'],
+  extends: ["eslint:recommended","eslint-plugin-prettier"],
   parserOptions: {
     ecmaFeatures: {
       jsx: true,
     },
-    ecmaVersion: 'latest',
-    sourceType: 'module',
+    ecmaVersion: "latest",
+    sourceType: "module",
   },
-  plugins: ['react'],
+  plugins: ["react","eslint-plugin-prettier"],
   rules: {
     semi: 0,
-    'prettier/prettier': [
-      'warn',
+    "prettier/prettier": [
+      "warn",
       {
         singleQuote: true,
         semi: false,
-        trailingComma: 'es5',
+        trailingComma: "es5",
       },
     ],
-    'react/self-closing-comp': 'off',
-    'max-len': 0,
-    'no-param-reassign': 0,
-    'jsx-a11y/label-has-associated-control': 0,
-    'react/function-component-definition': 0,
-    'react/react-in-jsx-scope': 0,
-    'import/extensions': 0,
-    'react/prop-types': 0,
-    'linebreak-style': 0,
-    'react/state-in-constructor': 0,
-    'import/prefer-default-export': 0,
-    'no-multiple-empty-lines': [
-      'error',
+    "react/self-closing-comp": "off",
+    "max-len": 0,
+    "no-param-reassign": 0,
+    "jsx-a11y/label-has-associated-control": 0,
+    "react/function-component-definition": 0,
+    "react/react-in-jsx-scope": 0,
+    "import/extensions": 0,
+    "react/prop-types": 0,
+    "linebreak-style": 0,
+    "react/state-in-constructor": 0,
+    "import/prefer-default-export": 0,
+    "no-multiple-empty-lines": [
+      "error",
       {
         max: 1,
         maxEOF: 1,
       },
     ],
-    'no-underscore-dangle': [
-      'error',
+    "no-underscore-dangle": [
+      "error",
       {
-        allow: ['_d', '_dh', '_h', '_id', '_m', '_n', '_t', '_text'],
+        allow: ["_d", "_dh", "_h", "_id", "_m", "_n", "_t", "_text"],
       },
     ],
-    'object-curly-newline': 0,
-    'react/jsx-filename-extension': 0,
-    'react/jsx-one-expression-per-line': 0,
-    'jsx-a11y/click-events-have-key-events': 0,
-    'jsx-a11y/alt-text': 0,
-    'jsx-a11y/no-autofocus': 0,
-    'jsx-a11y/no-static-element-interactions': 0,
-    'react/no-array-index-key': 0,
-    'jsx-a11y/anchor-is-valid': [
-      'error',
+    "object-curly-newline": 0,
+    "react/jsx-filename-extension": 0,
+    "react/jsx-one-expression-per-line": 0,
+    "jsx-a11y/click-events-have-key-events": 0,
+    "jsx-a11y/alt-text": 0,
+    "jsx-a11y/no-autofocus": 0,
+    "jsx-a11y/no-static-element-interactions": 0,
+    "react/no-array-index-key": 0,
+    "jsx-a11y/anchor-is-valid": [
+      "error",
       {
-        components: ['Link'],
-        specialLink: ['to', 'hrefLeft', 'hrefRight'],
-        aspects: ['noHref', 'invalidHref', 'preferButton'],
+        components: ["Link"],
+        specialLink: ["to", "hrefLeft", "hrefRight"],
+        aspects: ["noHref", "invalidHref", "preferButton"],
       },
     ],
-  },
+  }
 };
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,12 +1,7 @@
 import { useSelector } from 'react-redux'
 import { Route, Routes } from 'react-router-dom'
 
-import {
-  Searchbar,
-  Sidebar,
-  MusicPlayer,
-  TopPlay,
-} from './components'
+import { Searchbar, Sidebar, MusicPlayer, TopPlay } from './components'
 import {
   ArtistDetails,
   TopArtists,
@@ -18,9 +13,7 @@ import {
 } from './pages'
 
 const App = () => {
-  const { activeSong } = useSelector(
-    (state) => state.player
-  )
+  const { activeSong } = useSelector((state) => state.player)
 
   return (
     <div className="relative flex">
@@ -31,34 +24,13 @@ const App = () => {
         <div className="px-6 h-[calc(100vh-72px)] overflow-y-scroll hide-scrollbar flex xl:flex-row flex-col-reverse">
           <div className="flex-1 h-fit pb-40">
             <Routes>
-              <Route
-                path="/"
-                element={<Discover />}
-              />
-              <Route
-                path="/top-artists"
-                element={<TopArtists />}
-              />
-              <Route
-                path="/top-charts"
-                element={<TopCharts />}
-              />
-              <Route
-                path="/around-you"
-                element={<AroundYou />}
-              />
-              <Route
-                path="/artists/:id"
-                element={<ArtistDetails />}
-              />
-              <Route
-                path="/songs/:songid"
-                element={<SongDetails />}
-              />
-              <Route
-                path="/search/:searchTerm"
-                element={<Search />}
-              />
+              <Route path="/" element={<Discover />} />
+              <Route path="/top-artists" element={<TopArtists />} />
+              <Route path="/top-charts" element={<TopCharts />} />
+              <Route path="/around-you" element={<AroundYou />} />
+              <Route path="/artists/:id" element={<ArtistDetails />} />
+              <Route path="/songs/:songid" element={<SongDetails />} />
+              <Route path="/search/:searchTerm" element={<Search />} />
             </Routes>
           </div>
           <div className="xl:sticky relative top-0 h-fit">

diff --git a/src/components/DetailsHeader.jsx b/src/components/DetailsHeader.jsx
@@ -1,5 +1,3 @@
-const DetailsHeader = () => (
-  <div>DetailsHeader</div>
-)
+const DetailsHeader = () => <div>DetailsHeader</div>
 
 export default DetailsHeader
diff --git a/src/components/Loader.jsx b/src/components/Loader.jsx
@@ -2,11 +2,7 @@ import { loader } from '../assets'
 
 const Loader = ({ title }) => (
   <div className="w-full flex justify-center item-center flex-col">
-    <img
-      src={loader}
-      alt="loader"
-      className="w-32 h-32 object-contain"
-    />
+    <img src={loader} alt="loader" className="w-32 h-32 object-contain" />
     <h1 className="font-bold text-2xl text-white mt-2">
       {title || 'Loading...'}
     </h1>

diff --git a/src/components/MusicPlayer/Controls.jsx b/src/components/MusicPlayer/Controls.jsx
@@ -1,8 +1,5 @@
 import React from 'react'
-import {
-  MdSkipNext,
-  MdSkipPrevious,
-} from 'react-icons/md'
+import { MdSkipNext, MdSkipPrevious } from 'react-icons/md'
 import {
   BsArrowRepeat,
   BsFillPauseFill,

diff --git a/src/components/MusicPlayer/Seekbar.jsx b/src/components/MusicPlayer/Seekbar.jsx
@@ -1,18 +1,9 @@
 import React from 'react'
 
-const Seekbar = ({
-  value,
-  min,
-  max,
-  onInput,
-  setSeekTime,
-  appTime,
-}) => {
+const Seekbar = ({ value, min, max, onInput, setSeekTime, appTime }) => {
   // converts the time to format 0:00
   const getTime = (time) =>
-    `${Math.floor(time / 60)}:${`0${Math.floor(
-      time % 60
-    )}`.slice(-2)}`
+    `${Math.floor(time / 60)}:${`0${Math.floor(time % 60)}`.slice(-2)}`
 
   return (
     <div className="hidden sm:flex flex-row items-center">
@@ -23,9 +14,7 @@ const Seekbar = ({
       >
         -
       </button>
-      <p className="text-white">
-        {value === 0 ? '0:00' : getTime(value)}
-      </p>
+      <p className="text-white">{value === 0 ? '0:00' : getTime(value)}</p>
       <input
         type="range"
         step="any"
@@ -35,9 +24,7 @@ const Seekbar = ({
         onInput={onInput}
         className="md:block w-24 md:w-56 2xl:w-96 h-1 mx-4 2xl:mx-6 rounded-lg"
       />
-      <p className="text-white">
-        {max === 0 ? '0:00' : getTime(max)}
-      </p>
+      <p className="text-white">{max === 0 ? '0:00' : getTime(max)}</p>
       <button
         type="button"
         onClick={() => setSeekTime(appTime + 5)}

diff --git a/src/components/MusicPlayer/Track.jsx b/src/components/MusicPlayer/Track.jsx
@@ -1,16 +1,10 @@
 import React from 'react'
 
-const Track = ({
-  isPlaying,
-  isActive,
-  activeSong,
-}) => (
+const Track = ({ isPlaying, isActive, activeSong }) => (
   <div className="flex-1 flex items-center justify-start">
     <div
       className={`${
-        isPlaying && isActive
-          ? 'animate-[spin_3s_linear_infinite]'
-          : ''
+        isPlaying && isActive ? 'animate-[spin_3s_linear_infinite]' : ''
       } hidden sm:block h-16 w-16 mr-4`}
     >
       <img
@@ -21,14 +15,10 @@ const Track = ({
     </div>
     <div className="w-[50%]">
       <p className="truncate text-white font-bold text-lg">
-        {activeSong?.title
-          ? activeSong?.title
-          : 'No active Song'}
+        {activeSong?.title ? activeSong?.title : 'No active Song'}
       </p>
       <p className="truncate text-gray-300">
-        {activeSong?.subtitle
-          ? activeSong?.subtitle
-          : 'No active Song'}
+        {activeSong?.subtitle ? activeSong?.subtitle : 'No active Song'}
       </p>
     </div>
   </div>

diff --git a/src/components/MusicPlayer/VolumeBar.jsx b/src/components/MusicPlayer/VolumeBar.jsx
@@ -5,27 +5,13 @@ import {
   BsFillVolumeMuteFill,
 } from 'react-icons/bs'
 
-const VolumeBar = ({
-  value,
-  min,
-  max,
-  onChange,
-  setVolume,
-}) => (
+const VolumeBar = ({ value, min, max, onChange, setVolume }) => (
   <div className="hidden lg:flex flex-1 items-center justify-end">
     {value <= 1 && value > 0.5 && (
-      <BsFillVolumeUpFill
-        size={25}
-        color="#FFF"
-        onClick={() => setVolume(0)}
-      />
+      <BsFillVolumeUpFill size={25} color="#FFF" onClick={() => setVolume(0)} />
     )}
     {value <= 0.5 && value > 0 && (
-      <BsVolumeDownFill
-        size={25}
-        color="#FFF"
-        onClick={() => setVolume(0)}
-      />
+      <BsVolumeDownFill size={25} color="#FFF" onClick={() => setVolume(0)} />
     )}
     {value === 0 && (
       <BsFillVolumeMuteFill