added: collection page and their routes

package.json

@@ -14,6 +14,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.2.1",
+    "react-loader-spinner": "^6.1.6",
     "react-player": "^2.16.0",
     "react-router-dom": "^6.24.1",
     "universal-cookie": "^7.2.0"

src/App.jsx

@@ -11,6 +11,8 @@ import Search from './pages/Search/Search';
 import Library from './pages/Library/Library';
 import Login from './pages/Login/Login';
 import NotFound from './pages/NotFound/NotFound';
+import Collection from './pages/Collection/Collection';
+import Playlist from './pages/Playlist/Playlist';
 
 function App() {
   return (
@@ -21,6 +23,12 @@ function App() {
             <Route index element={<Home />} />
             <Route path="/search" element={<Search />} />
             <Route path="/library" element={<Library />} />
+            <Route path="/collection/tracks" element={<Collection />} />
+            <Route path="/playlist/:playlistId" element={<Playlist />} />
+            <Route path="/artist/:artistId" element={'Artist Page'} />
+            <Route path="/album/:albumId" element={'Album Page'} />
+            <Route path="/track/:trackId" element={'Track Page'} />
+            <Route path="/user/:userId" element={'User Page'} />
           </Route>
           <Route path="/login" element={<Login />} />
           <Route path="/404" element={<NotFound />} />

src/assets/styles/globals.css

@@ -5,6 +5,18 @@
   --playlist-card-bg: rgba(167, 167, 167, 0.68);
   --des-font-color: rgba(0, 0, 0, 0.53);
   --spotify-green-theme: #1db954;
+  --primary-header-bg: rgb(102 64 228);
+  --primary-header-gradient-bg: linear-gradient(
+    212deg,
+    rgba(70, 50, 136, 1) 0%,
+    rgb(101 68 212) 100%
+  );
+  --primary-table-bg: rgb(55, 55, 55);
+  --primary-table-gradient-bg: linear-gradient(
+    180deg,
+    rgb(192 192 192) 100%,
+    rgb(192 192 192) 100%
+  );
 }
 * {
   margin: 0;
@@ -24,5 +36,17 @@ body {
     --primary-font-color: #e9e9e9;
     --playlist-card-bg: rgba(49, 49, 49, 0.68);
     --des-font-color: rgba(255, 255, 255, 0.53);
+    --primary-header-bg: rgb(70, 50, 136);
+    --primary-header-gradient-bg: linear-gradient(
+      212deg,
+      rgba(70, 50, 136, 1) 0%,
+      rgba(39, 28, 76, 1) 100%
+    );
+    --primary-table-bg: rgb(55, 55, 55);
+    --primary-table-gradient-bg: linear-gradient(
+      180deg,
+      rgba(55, 55, 55, 1) 0%,
+      rgba(0, 0, 0, 1) 100%
+    );
   }
 }

src/components/HorizontalScrollCard/HorizontalCard.module.css

@@ -54,9 +54,13 @@
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
 }
 .text:hover {
   overflow: visible;
+  text-overflow: clip;
 }
 @media only screen and (max-width: 425px) {
   .cardImg > img {

src/components/LeftSection/VerticalCard/VerticalCard.jsx

@@ -1,7 +1,10 @@
 import React from 'react';
+import { useNavigate } from 'react-router-dom';
 import styles from './VerticalCard.module.css';
 
 function VerticalCard({ collectionData }) {
+  const navigate = useNavigate();
+
   return (
     <div className={styles.libraryVerticalScroll}>
       {collectionData.map((data, index) => {
@@ -10,8 +13,7 @@ function VerticalCard({ collectionData }) {
             <div
               className={styles.verticalCard}
               key={index}
-              id={data.id}
-              href={data.href}
+              onClick={() => navigate(`/${data.routePath}/${data.id}`)}
             >
               <div className={styles.verticalCardImg}>
                 {data.type == 'artist' ? (
@@ -37,7 +39,7 @@ function VerticalCard({ collectionData }) {
                     <span>{data.type}</span>
                   </div>
                   <div>
-                    <span>{'•' + data.songs}</span>
+                    <span>{data.songs != null ? '•' + data.songs : ''}</span>
                   </div>
                 </div>
               </div>

src/components/MusicController/MusicController.jsx

@@ -7,7 +7,7 @@ import { HiOutlineQueueList } from 'react-icons/hi2';
 import { CgMusicSpeaker } from 'react-icons/cg';
 import { HiOutlineVolumeUp, HiOutlineVolumeOff } from 'react-icons/hi';
 import { BsArrowsAngleExpand } from 'react-icons/bs';
-import { IoPlaySharp, IoPause } from 'react-icons/io5';
+import { IoMdPlay, IoMdPause } from 'react-icons/io';
 import { TbRepeat } from 'react-icons/tb';
 import { RxShuffle } from 'react-icons/rx';
 import { MdSkipPrevious, MdSkipNext } from 'react-icons/md';
@@ -51,7 +51,7 @@ function MusicController() {
             </div>
             <div className={styles.ctrlBtn}>
               <button onClick={playPause}>
-                {isPlaying ? <IoPause size={25} /> : <IoPlaySharp size={25} />}
+                {isPlaying ? <IoMdPause size={20} /> : <IoMdPlay size={20} />}
               </button>
             </div>
             <div className={styles.nextBtn}>