diff --git a/frontend/package-lock.json b/frontend/package-lock.json index f0608e8..8f3bbc2 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -12,7 +12,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", @@ -4313,6 +4314,14 @@ "react-dom": "^16.3.0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/react-icons": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.1.tgz", + "integrity": "sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", diff --git a/frontend/package.json b/frontend/package.json index 1ee49f9..97e8618 100644 --- a/frontend/package.json +++ b/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", diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 3706019..0a7f716 100644 --- a/frontend/src/App.jsx +++ b/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( + // + // ) + return (
diff --git a/frontend/src/Assets/AlbumIcon.jsx b/frontend/src/Assets/AlbumIcon.jsx new file mode 100644 index 0000000..16d3ca4 --- /dev/null +++ b/frontend/src/Assets/AlbumIcon.jsx @@ -0,0 +1,37 @@ +export default function AlbumIcon() { + return ( + + + + + + + ); +} diff --git a/frontend/src/Assets/ArtistIcon.jsx b/frontend/src/Assets/ArtistIcon.jsx new file mode 100644 index 0000000..e702d86 --- /dev/null +++ b/frontend/src/Assets/ArtistIcon.jsx @@ -0,0 +1,39 @@ +export default function ArtistIcon() { + return ( + + + + + + ); +} diff --git a/frontend/src/Assets/DeleteIcon.jsx b/frontend/src/Assets/DeleteIcon.jsx new file mode 100644 index 0000000..1f11771 --- /dev/null +++ b/frontend/src/Assets/DeleteIcon.jsx @@ -0,0 +1,38 @@ +export default function DeleteIcon() { + return ( + + + + + + + ); +} diff --git a/frontend/src/Assets/HomeIcon.jsx b/frontend/src/Assets/HomeIcon.jsx new file mode 100644 index 0000000..859907a --- /dev/null +++ b/frontend/src/Assets/HomeIcon.jsx @@ -0,0 +1,26 @@ +export default function HomeIcon() { + return ( + + + + + ); +} diff --git a/frontend/src/Assets/PlaylistIcon.jsx b/frontend/src/Assets/PlaylistIcon.jsx new file mode 100644 index 0000000..2edd47f --- /dev/null +++ b/frontend/src/Assets/PlaylistIcon.jsx @@ -0,0 +1,42 @@ +export default function PlaylistIcon() { + return ( + + + + + + + ); +} diff --git a/frontend/src/Assets/SongsIcon.jsx b/frontend/src/Assets/SongsIcon.jsx new file mode 100644 index 0000000..64888b0 --- /dev/null +++ b/frontend/src/Assets/SongsIcon.jsx @@ -0,0 +1,32 @@ +export default function SongsIcon() { + return ( + + + + + + ); +} diff --git a/frontend/src/components/Home.jsx b/frontend/src/components/Home.jsx new file mode 100644 index 0000000..09dedcd --- /dev/null +++ b/frontend/src/components/Home.jsx @@ -0,0 +1,23 @@ +import React from 'react' +import NavBar from './NavBar' +import SideBar from './SideBar' + +function Home() { + return ( +
+ + + +
+ ) +} + +function HomeContent() { + return ( +
+ HomeContent +
+ ) +} + +export default Home \ No newline at end of file diff --git a/frontend/src/components/NavBar.jsx b/frontend/src/components/NavBar.jsx new file mode 100644 index 0000000..52933aa --- /dev/null +++ b/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 ( +
+ +
+ ); +} + +function SearchBar() { + return ( +
+
+ + +
+
+ ); +} + +function Nav() { + return ( +
+
+ +
+
+

Home

+
+
+
+ +
+
+
+

Albums

+
+
+
+

Songs

+
+
+
+

Artist

+
+
+
+
+ +
+ + + +
+
+
+ ); +} + +function NavPlaylist({ playlistName }) { + return ( +
+
+
+

{playlistName}

+
+
+
+
+
+ ); +} + +export default NavBar; diff --git a/frontend/src/components/SideBar.jsx b/frontend/src/components/SideBar.jsx new file mode 100644 index 0000000..5e436e8 --- /dev/null +++ b/frontend/src/components/SideBar.jsx @@ -0,0 +1,11 @@ +import React from 'react' + +function SideBar() { + return ( +
+ SideBar +
+ ) +} + +export default SideBar \ No newline at end of file