Added NavBar component

frontend/package.json

@@ -14,7 +14,8 @@
     "he": "^1.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-h5-audio-player": "^3.9.1"
+    "react-h5-audio-player": "^3.9.1",
+    "react-icons": "^5.2.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.66",

frontend/src/App.jsx

@@ -4,6 +4,7 @@ import "react-h5-audio-player/lib/styles.css";
 import "./App.css";
 import axios from "axios";
 import he from "he";
+import Home from "./components/Home";
 
 const App = () => {
     const [data, setData] = useState(null);
@@ -55,6 +56,10 @@ const App = () => {
         setCurrplaying(index);
     };
 
+    // return(
+    //     <Home />
+    // )
+
     return (
         <div className="ui">
             <div className="player">

frontend/src/Assets/AlbumIcon.jsx

@@ -0,0 +1,37 @@
+export default function AlbumIcon() {
+    return (
+        <svg
+            className="text-white"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            width={24}
+            height={24}
+            color={"#000000"}
+            fill={"none"}
+        >
+            <path
+                d="M6 17.9745C6.1287 19.2829 6.41956 20.1636 7.07691 20.8209C8.25596 22 10.1536 22 13.9489 22C17.7442 22 19.6419 22 20.8209 20.8209C22 19.6419 22 17.7442 22 13.9489C22 10.1536 22 8.25596 20.8209 7.07691C20.1636 6.41956 19.2829 6.1287 17.9745 6"
+                stroke="currentColor"
+                strokeWidth="1.5"
+            />
+            <path
+                d="M2 10C2 6.22876 2 4.34315 3.17157 3.17157C4.34315 2 6.22876 2 10 2C13.7712 2 15.6569 2 16.8284 3.17157C18 4.34315 18 6.22876 18 10C18 13.7712 18 15.6569 16.8284 16.8284C15.6569 18 13.7712 18 10 18C6.22876 18 4.34315 18 3.17157 16.8284C2 15.6569 2 13.7712 2 10Z"
+                stroke="currentColor"
+                strokeWidth="1.5"
+            />
+            <path
+                d="M2 11.1185C2.61902 11.0398 3.24484 11.001 3.87171 11.0023C6.52365 10.9533 9.11064 11.6763 11.1711 13.0424C13.082 14.3094 14.4247 16.053 15 18"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinejoin="round"
+            />
+            <path
+                d="M12.9998 7H13.0088"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+        </svg>
+    );
+}

frontend/src/Assets/ArtistIcon.jsx

@@ -0,0 +1,39 @@
+export default function ArtistIcon() {
+    return (
+        <svg
+            className="text-white"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            width={24}
+            height={24}
+            color={"#000000"}
+            fill={"none"}
+        >
+            <circle
+                cx="12"
+                cy="12"
+                r="10"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+            <circle
+                cx="10"
+                cy="16"
+                r="2"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+            <path
+                d="M8.00897 9H8M16 9H15.991"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+        </svg>
+    );
+}

frontend/src/Assets/DeleteIcon.jsx

@@ -0,0 +1,38 @@
+export default function DeleteIcon() {
+    return (
+        <svg
+            className="text-white"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            width={24}
+            height={24}
+            color={"#000000"}
+            fill={"none"}
+        >
+            <path
+                d="M19.5 5.5L18.8803 15.5251C18.7219 18.0864 18.6428 19.3671 18.0008 20.2879C17.6833 20.7431 17.2747 21.1273 16.8007 21.416C15.8421 22 14.559 22 11.9927 22C9.42312 22 8.1383 22 7.17905 21.4149C6.7048 21.1257 6.296 20.7408 5.97868 20.2848C5.33688 19.3626 5.25945 18.0801 5.10461 15.5152L4.5 5.5"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+            />
+            <path
+                d="M3 5.5H21M16.0557 5.5L15.3731 4.09173C14.9196 3.15626 14.6928 2.68852 14.3017 2.39681C14.215 2.3321 14.1231 2.27454 14.027 2.2247C13.5939 2 13.0741 2 12.0345 2C10.9688 2 10.436 2 9.99568 2.23412C9.8981 2.28601 9.80498 2.3459 9.71729 2.41317C9.32164 2.7167 9.10063 3.20155 8.65861 4.17126L8.05292 5.5"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+            />
+            <path
+                d="M9.5 16.5L9.5 10.5"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+            />
+            <path
+                d="M14.5 16.5L14.5 10.5"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+            />
+        </svg>
+    );
+}

frontend/src/Assets/HomeIcon.jsx

@@ -0,0 +1,26 @@
+export default function HomeIcon() {
+    return (
+        <svg
+            className="text-white"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            width={24}
+            height={24}
+            color={"#000000"}
+            fill={"none"}
+        >
+            <path
+                d="M12.0001 18L12.0001 15"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+            />
+            <path
+                d="M2.35151 13.2135C1.99849 10.9162 1.82198 9.76763 2.25629 8.74938C2.69059 7.73112 3.65415 7.03443 5.58126 5.64106L7.02111 4.6C9.41841 2.86667 10.6171 2 12.0001 2C13.3832 2 14.5818 2.86667 16.9791 4.6L18.419 5.64106C20.3461 7.03443 21.3097 7.73112 21.744 8.74938C22.1783 9.76763 22.0018 10.9162 21.6487 13.2135L21.3477 15.1724C20.8473 18.4289 20.597 20.0572 19.4291 21.0286C18.2612 22 16.5538 22 13.1389 22H10.8613C7.44646 22 5.73903 22 4.57112 21.0286C3.40321 20.0572 3.15299 18.4289 2.65255 15.1724L2.35151 13.2135Z"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinejoin="round"
+            />
+        </svg>
+    );
+}

frontend/src/Assets/PlaylistIcon.jsx

@@ -0,0 +1,42 @@
+export default function PlaylistIcon() {
+    return (
+        <svg
+            className="text-white"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            width={24}
+            height={24}
+            color={"#000000"}
+            fill={"none"}
+        >
+            <path
+                d="M3 15C3 12.1911 3 10.7866 3.67412 9.77772C3.96596 9.34096 4.34096 8.96596 4.77772 8.67412C5.78661 8 7.19108 8 10 8H14C16.8089 8 18.2134 8 19.2223 8.67412C19.659 8.96596 20.034 9.34096 20.3259 9.77772C21 10.7866 21 12.1911 21 15C21 17.8089 21 19.2134 20.3259 20.2223C20.034 20.659 19.659 21.034 19.2223 21.3259C18.2134 22 16.8089 22 14 22H10C7.19108 22 5.78661 22 4.77772 21.3259C4.34096 21.034 3.96596 20.659 3.67412 20.2223C3 19.2134 3 17.8089 3 15Z"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+            <path
+                d="M12.5 16.5C12.5 17.3284 11.8284 18 11 18C10.1716 18 9.5 17.3284 9.5 16.5C9.5 15.6716 10.1716 15 11 15C11.8284 15 12.5 15.6716 12.5 16.5ZM12.5 16.5V11.5C12.5 11.5 12.9 13.2333 14.5 13.5"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+            <path
+                d="M19 8C18.9821 6.76022 18.89 6.05733 18.4182 5.58579C17.8321 5 16.8888 5 15.0022 5H8.99783C7.11118 5 6.16786 5 5.58176 5.58579C5.10996 6.05733 5.01794 6.76022 5 8"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+            <path
+                d="M17 5C17 4.06812 17 3.60218 16.8478 3.23463C16.6448 2.74458 16.2554 2.35523 15.7654 2.15224C15.3978 2 14.9319 2 14 2H10C9.06812 2 8.60218 2 8.23463 2.15224C7.74458 2.35523 7.35523 2.74458 7.15224 3.23463C7 3.60218 7 4.06812 7 5"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+        </svg>
+    );
+}

frontend/src/Assets/SongsIcon.jsx

@@ -0,0 +1,32 @@
+export default function SongsIcon() {
+    return (
+        <svg
+            className="text-white"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            width={24}
+            height={24}
+            color={"#000000"}
+            fill={"none"}
+        >
+            <path
+                d="M2 9C2 5.70017 2 4.05025 3.02513 3.02513C4.05025 2 5.70017 2 9 2H11C14.2998 2 15.9497 2 16.9749 3.02513C18 4.05025 18 5.70017 18 9V11C18 14.2998 18 15.9497 16.9749 16.9749C15.9497 18 14.2998 18 11 18H9C5.70017 18 4.05025 18 3.02513 16.9749C2 15.9497 2 14.2998 2 11V9Z"
+                stroke="currentColor"
+                strokeWidth="1.5"
+            />
+            <path
+                d="M18.2383 7C19.5732 7.08138 20.4232 7.30467 21.036 7.91738C22 8.88143 22 10.433 22 13.5363V15.4171C22 18.5203 22 20.0719 21.036 21.036C20.0719 22 18.5203 22 15.4171 22H13.5363C10.433 22 8.88143 22 7.91738 21.036C7.30467 20.4232 7.08138 19.5732 7 18.2383"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+            />
+            <path
+                d="M11 12V6C11.2222 6.4 11.4 8.08 13 8.4M11 12C11 13.1046 10.1046 14 9 14C7.89543 14 7 13.1046 7 12C7 10.8954 7.89543 10 9 10C10.1046 10 11 10.8954 11 12Z"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+        </svg>
+    );
+}

frontend/src/components/Home.jsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import NavBar from './NavBar'
+import SideBar from './SideBar'
+
+function Home() {
+  return (
+    <div className='flex w-screen h-screen'>
+        <NavBar />
+        <HomeContent />
+        <SideBar />
+    </div>
+  )
+}
+
+function HomeContent() {
+  return (
+    <div className='bg-slate-400 h-full text-center flex-1'>
+        HomeContent
+    </div>
+  )
+}
+
+export default Home

frontend/src/components/NavBar.jsx

@@ -0,0 +1,83 @@
+import React from "react";
+import { IoSearch } from "react-icons/io5";
+import HomeIcon from "../Assets/HomeIcon";
+import PlaylistIcon from "../Assets/PlaylistIcon";
+import DeleteIcon from "../Assets/DeleteIcon";
+import AlbumIcon from "../Assets/AlbumIcon";
+import ArtistIcon from "../Assets/ArtistIcon";
+import SongsIcon from "../Assets/SongsIcon";
+
+function NavBar() {
+    return (
+        <div className="flex flex-col text-xl bg-slate-500 max-w-[280px] w-[25vw] text-center justify-center gap-[8%]">
+            <SearchBar />
+            <Nav />
+        </div>
+    );
+}
+
+function SearchBar() {
+    return (
+        <div className="bg-slate-600 p-2 rounded-2xl text-white ml-8 mr-8">
+            <div className="relative">
+                <input className="bg-transparent text-md outline-none w-[80%] pl-6" type="text" placeholder="search..." />
+                <IoSearch className="w-30 text-white absolute top-[50%] translate-y-[-50%] left-2" />
+            </div>
+        </div>
+    );
+}
+
+function Nav() {
+    return (
+        <div className="w-full text-xl flex text-white flex-col gap-14 p-12 pb-20">
+            <div className="flex flex-col gap-5">
+                <label className="text-left pl-3 font-bold">MENU</label>
+                <div className="flex w-full justify-start gap-5 hover:cursor-pointer">
+                    <div className="w-30"><HomeIcon /></div>
+                    <p>Home</p>
+                </div>
+            </div>
+            <div className="flex w-full flex-col gap-5">
+                <label className="text-left pl-3 font-bold">LIBRARY</label>
+                <div className="flex flex-col gap-4">
+                    <div className="flex w-full justify-start gap-5 hover:cursor-pointer">
+                        <div className="w-30"><AlbumIcon /></div>
+                        <p className="text-left">Albums</p>
+                    </div>
+                    <div className="flex w-full justify-start gap-5 hover:cursor-pointer">
+                        <div className="w-30"><SongsIcon /></div>
+                        <p className="text-left">Songs</p>
+                    </div>
+                    <div className="flex w-full justify-start gap-5 hover:cursor-pointer">
+                        <div className="w-30"><ArtistIcon /></div>
+                        <p className="text-left">Artist</p>
+                    </div>
+                </div>
+            </div>
+            <div className="flex flex-col gap-5">
+                <label className="text-left pl-3 font-bold">PLAYLIST</label>
+                <div className="flex flex-col gap-4 justify-center">
+                    <NavPlaylist playlistName="playlist1"/>
+                    <NavPlaylist playlistName="playlist2"/>
+                    <NavPlaylist playlistName="playlist3"/>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+function NavPlaylist({ playlistName }) {
+    return (
+        <div className="relative w-full flex justify-start gap-6">
+            <div className="flex gap-4 hover:cursor-pointer">
+                <div className="w-30"><PlaylistIcon /></div>
+                <p>{playlistName}</p>
+            </div>
+            <div className="absolute right-0 hover:cursor-pointer">
+                <div className="w-30"><DeleteIcon /></div>
+            </div>
+        </div>
+    );
+}
+
+export default NavBar;

frontend/src/components/SideBar.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+function SideBar() {
+  return (
+    <div className='bg-slate-500 w-[25vw] text-center'>
+        SideBar
+    </div>
+  )
+}
+
+export default SideBar