From 8b88b9ab04d6ec34f4b2c6cd7bdbac1cfe8c8c0f Mon Sep 17 00:00:00 2001 From: shivansh chourasia Date: Thu, 11 Jul 2024 00:51:01 +0530 Subject: [PATCH 1/2] Added sidebar componets --- package-lock.json | 64 +++++++++++++------------- package.json | 4 +- src/App.jsx | 20 ++++++++ src/Components/SongSearch.jsx | 1 + src/Components/sidebars/aroundYou.jsx | 11 +++++ src/Components/sidebars/discover.jsx | 11 +++++ src/Components/sidebars/topArtists.jsx | 11 +++++ src/Components/sidebars/topCharts.jsx | 11 +++++ src/main.jsx | 43 +++++++++-------- 9 files changed, 122 insertions(+), 54 deletions(-) create mode 100644 src/App.jsx create mode 100644 src/Components/sidebars/aroundYou.jsx create mode 100644 src/Components/sidebars/discover.jsx create mode 100644 src/Components/sidebars/topArtists.jsx create mode 100644 src/Components/sidebars/topCharts.jsx diff --git a/package-lock.json b/package-lock.json index f72cc8f..85cbead 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,7 @@ "axios": "^1.5.1", "dotenv": "^16.3.1", "framer-motion": "^10.16.4", - "react": "^18.2.0", + "react": "^18.3.1", "react-dom": "^18.2.0", "react-icons": "^4.11.0" }, @@ -26,7 +26,7 @@ "eslint-plugin-react-refresh": "^0.4.3", "postcss": "^8.4.31", "prettier": "3.0.3", - "react-router-dom": "^6.16.0", + "react-router-dom": "^6.24.1", "tailwindcss": "^3.3.3", "vite": "^4.4.5" } @@ -955,9 +955,9 @@ } }, "node_modules/@remix-run/router": { - "version": "1.9.0", - "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.9.0.tgz", - "integrity": "sha512-bV63itrKBC0zdT27qYm6SDZHlkXwFL1xMBuhkn+X7l0+IIhNaH5wuuvZKp6eKhCD4KFhujhfhCT1YxXW6esUIA==", + "version": "1.17.1", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.17.1.tgz", + "integrity": "sha512-mCOMec4BKd6BRGBZeSnGiIgwsbLGp3yhVqAD8H+PxiRNEHgDpZb8J1TnrSDlg97t0ySKMQJTHCWBCmBpSmkF6Q==", "dev": true, "engines": { "node": ">=14.0.0" @@ -3548,9 +3548,9 @@ ] }, "node_modules/react": { - "version": "18.2.0", - "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", - "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", + "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", "dependencies": { "loose-envify": "^1.1.0" }, @@ -3594,12 +3594,12 @@ } }, "node_modules/react-router": { - "version": "6.16.0", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.16.0.tgz", - "integrity": "sha512-VT4Mmc4jj5YyjpOi5jOf0I+TYzGpvzERy4ckNSvSh2RArv8LLoCxlsZ2D+tc7zgjxcY34oTz2hZaeX5RVprKqA==", + "version": "6.24.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.24.1.tgz", + "integrity": "sha512-PTXFXGK2pyXpHzVo3rR9H7ip4lSPZZc0bHG5CARmj65fTT6qG7sTngmb6lcYu1gf3y/8KxORoy9yn59pGpCnpg==", "dev": true, "dependencies": { - "@remix-run/router": "1.9.0" + "@remix-run/router": "1.17.1" }, "engines": { "node": ">=14.0.0" @@ -3609,13 +3609,13 @@ } }, "node_modules/react-router-dom": { - "version": "6.16.0", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.16.0.tgz", - "integrity": "sha512-aTfBLv3mk/gaKLxgRDUPbPw+s4Y/O+ma3rEN1u8EgEpLpPe6gNjIsWt9rxushMHHMb7mSwxRGdGlGdvmFsyPIg==", + "version": "6.24.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.24.1.tgz", + "integrity": "sha512-U19KtXqooqw967Vw0Qcn5cOvrX5Ejo9ORmOtJMzYWtCT4/WOfFLIZGGsVLxcd9UkBO0mSTZtXqhZBsWlHr7+Sg==", "dev": true, "dependencies": { - "@remix-run/router": "1.9.0", - "react-router": "6.16.0" + "@remix-run/router": "1.17.1", + "react-router": "6.24.1" }, "engines": { "node": ">=14.0.0" @@ -4977,9 +4977,9 @@ } }, "@remix-run/router": { - "version": "1.9.0", - "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.9.0.tgz", - "integrity": "sha512-bV63itrKBC0zdT27qYm6SDZHlkXwFL1xMBuhkn+X7l0+IIhNaH5wuuvZKp6eKhCD4KFhujhfhCT1YxXW6esUIA==", + "version": "1.17.1", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.17.1.tgz", + "integrity": "sha512-mCOMec4BKd6BRGBZeSnGiIgwsbLGp3yhVqAD8H+PxiRNEHgDpZb8J1TnrSDlg97t0ySKMQJTHCWBCmBpSmkF6Q==", "dev": true }, "@types/prop-types": { @@ -6790,9 +6790,9 @@ "dev": true }, "react": { - "version": "18.2.0", - "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", - "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", + "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", "requires": { "loose-envify": "^1.1.0" } @@ -6825,22 +6825,22 @@ "dev": true }, "react-router": { - "version": "6.16.0", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.16.0.tgz", - "integrity": "sha512-VT4Mmc4jj5YyjpOi5jOf0I+TYzGpvzERy4ckNSvSh2RArv8LLoCxlsZ2D+tc7zgjxcY34oTz2hZaeX5RVprKqA==", + "version": "6.24.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.24.1.tgz", + "integrity": "sha512-PTXFXGK2pyXpHzVo3rR9H7ip4lSPZZc0bHG5CARmj65fTT6qG7sTngmb6lcYu1gf3y/8KxORoy9yn59pGpCnpg==", "dev": true, "requires": { - "@remix-run/router": "1.9.0" + "@remix-run/router": "1.17.1" } }, "react-router-dom": { - "version": "6.16.0", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.16.0.tgz", - "integrity": "sha512-aTfBLv3mk/gaKLxgRDUPbPw+s4Y/O+ma3rEN1u8EgEpLpPe6gNjIsWt9rxushMHHMb7mSwxRGdGlGdvmFsyPIg==", + "version": "6.24.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.24.1.tgz", + "integrity": "sha512-U19KtXqooqw967Vw0Qcn5cOvrX5Ejo9ORmOtJMzYWtCT4/WOfFLIZGGsVLxcd9UkBO0mSTZtXqhZBsWlHr7+Sg==", "dev": true, "requires": { - "@remix-run/router": "1.9.0", - "react-router": "6.16.0" + "@remix-run/router": "1.17.1", + "react-router": "6.24.1" } }, "read-cache": { diff --git a/package.json b/package.json index 5bb90f2..c0b828c 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "axios": "^1.5.1", "dotenv": "^16.3.1", "framer-motion": "^10.16.4", - "react": "^18.2.0", + "react": "^18.3.1", "react-dom": "^18.2.0", "react-icons": "^4.11.0" }, @@ -30,7 +30,7 @@ "eslint-plugin-react-refresh": "^0.4.3", "postcss": "^8.4.31", "prettier": "3.0.3", - "react-router-dom": "^6.16.0", + "react-router-dom": "^6.24.1", "tailwindcss": "^3.3.3", "vite": "^4.4.5" } diff --git a/src/App.jsx b/src/App.jsx new file mode 100644 index 0000000..1527dad --- /dev/null +++ b/src/App.jsx @@ -0,0 +1,20 @@ +import React from 'react' +import { Routes, Route } from 'react-router-dom' +import Home from "./Components/Home.jsx" +import Player from "./Components/Player.jsx" +import { SongSearch} from "./Components/SongSearch.jsx" + +const App = () => { + return ( +
+ + } /> + } /> + } /> + {/* } /> */} + +
+ ) +} + +export default App diff --git a/src/Components/SongSearch.jsx b/src/Components/SongSearch.jsx index 264f21b..fff5c07 100644 --- a/src/Components/SongSearch.jsx +++ b/src/Components/SongSearch.jsx @@ -28,6 +28,7 @@ export default function SongSearch() { }, []) useEffect(() => { + console.log("thissssssss"); getTracks(); }, []) diff --git a/src/Components/sidebars/aroundYou.jsx b/src/Components/sidebars/aroundYou.jsx new file mode 100644 index 0000000..e760e4c --- /dev/null +++ b/src/Components/sidebars/aroundYou.jsx @@ -0,0 +1,11 @@ +// import React from 'react' + +const aroundyou = () => { + return ( +
+

This is around you page

+
+ ) +} + +export default aroundyou diff --git a/src/Components/sidebars/discover.jsx b/src/Components/sidebars/discover.jsx new file mode 100644 index 0000000..39583ee --- /dev/null +++ b/src/Components/sidebars/discover.jsx @@ -0,0 +1,11 @@ +// import React from 'react' + +const discover = () => { + return ( +
+

This is Discover Page

+
+ ) +} + +export default discover \ No newline at end of file diff --git a/src/Components/sidebars/topArtists.jsx b/src/Components/sidebars/topArtists.jsx new file mode 100644 index 0000000..64d168a --- /dev/null +++ b/src/Components/sidebars/topArtists.jsx @@ -0,0 +1,11 @@ +// import React from 'react' + +const topArtists = () => { + return ( +
+

This is Top Artists page

+
+ ) +} + +export default topArtists diff --git a/src/Components/sidebars/topCharts.jsx b/src/Components/sidebars/topCharts.jsx new file mode 100644 index 0000000..c475101 --- /dev/null +++ b/src/Components/sidebars/topCharts.jsx @@ -0,0 +1,11 @@ +// import React from 'react' + +const topCharts = () => { + return ( +
+

This is Top Charts Page

+
+ ) +} + +export default topCharts \ No newline at end of file diff --git a/src/main.jsx b/src/main.jsx index 66e2514..a33cce4 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,29 +1,32 @@ import React from "react"; -import Home from "./Components/Home.jsx"; import ReactDOM from "react-dom/client"; -import SongSearch from "./Components/SongSearch.jsx"; -import { createBrowserRouter, RouterProvider } from "react-router-dom"; +// import Home from "./Components/Home.jsx"; +// import SongSearch from "./Components/SongSearch.jsx"; +// import Player from "./Components/Player.jsx"; +// import { createBrowserRouter, RouterProvider } from "react-router-dom"; +import { BrowserRouter } from "react-router-dom"; import "./index.css"; import "./App.css"; -import Player from "./Components/Player.jsx"; - -const MyApp = createBrowserRouter([ - { - path: "/", - element: , - }, - { - path: "/player", - element: , - }, - { - path: "/search", - element: , - }, -]); +import App from "./App.jsx"; +// const MyApp = createBrowserRouter([ +// { +// path: "/", +// element: , +// }, +// { +// path: "/player", +// element: , +// }, +// { +// path: "/search", +// element: , +// }, +// ]); ReactDOM.createRoot(document.getElementById("root")).render( - + + + , ); From 3df3d8a4f3453ee36eb657177e0ef1b0f16bca39 Mon Sep 17 00:00:00 2001 From: shivansh chourasia Date: Thu, 11 Jul 2024 12:30:25 +0530 Subject: [PATCH 2/2] Added: Routing for all sidebar pages #54 --- src/App.jsx | 21 +++++++++++++------ src/Components/Home.jsx | 3 +-- src/Components/Navbar.jsx | 31 +++++++--------------------- src/Components/Player.jsx | 5 +++-- src/Components/Sidebar.jsx | 39 +++++++++++++++++++++++++++++++++++ src/Components/SongSearch.jsx | 4 ++-- 6 files changed, 68 insertions(+), 35 deletions(-) create mode 100644 src/Components/Sidebar.jsx diff --git a/src/App.jsx b/src/App.jsx index 1527dad..f5827ea 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,17 +1,26 @@ -import React from 'react' +// import React from 'react' import { Routes, Route } from 'react-router-dom' import Home from "./Components/Home.jsx" -import Player from "./Components/Player.jsx" -import { SongSearch} from "./Components/SongSearch.jsx" +import Discover from './Components/sidebars/discover.jsx' +import Aroundyou from './Components/sidebars/aroundyou.jsx' +import TopCharts from './Components/sidebars/topCharts.jsx' +import TopArtists from './Components/sidebars/topArtists.jsx' +import Navbar from './Components/Navbar.jsx' +import Player from './Components/Player.jsx' +import SongSearch from './Components/SongSearch.jsx' const App = () => { return (
+ } /> - } /> - } /> - {/* } /> */} + }/> + }/> + }/> + }/> + } /> + } />
) diff --git a/src/Components/Home.jsx b/src/Components/Home.jsx index d0ea61d..624227f 100644 --- a/src/Components/Home.jsx +++ b/src/Components/Home.jsx @@ -3,7 +3,6 @@ import { motion, useAnimation } from "framer-motion"; import Background from "/bag.jpg"; import PageThree from "./PageThree"; import Features from "./Features"; -import Navbar from "./Navbar"; import Footer from "./Footer"; import { Link } from "react-router-dom"; @@ -48,7 +47,7 @@ export default function Home() { return ( <> - +
-
    -
  • - - Discover -
    • -
  • - - Around You -
    • -
  • - - Top Artists -
    • -
  • - {" "} - - Top Charts -
    • -
+ + ) diff --git a/src/Components/Player.jsx b/src/Components/Player.jsx index ff6f605..9d26471 100644 --- a/src/Components/Player.jsx +++ b/src/Components/Player.jsx @@ -2,7 +2,7 @@ import { useState, useEffect, useRef } from "react"; import { useLocation } from "react-router-dom"; import API_Controller from "../../utils/API_Controller"; -import Navbar from "./Navbar"; + import Footer from "./Footer"; import "../App.css"; import Background from "/bag.jpg"; @@ -56,11 +56,12 @@ export default function Player() { return ( <> +

PLayer

- + {/* */} { songData && token ? ( diff --git a/src/Components/Sidebar.jsx b/src/Components/Sidebar.jsx new file mode 100644 index 0000000..ec7210b --- /dev/null +++ b/src/Components/Sidebar.jsx @@ -0,0 +1,39 @@ +// import { useState } from 'react' +import { FaHome } from "react-icons/fa"; +import { GrGallery } from "react-icons/gr"; +import { BsFillPeopleFill } from "react-icons/bs"; +import { FaHashtag } from "react-icons/fa"; +// import Hamburger from "/hamburger.png"; +import { Link } from 'react-router-dom'; + +const Sidebar = () => { + return ( +
+
    +
  • + + Discover +
    • + +
  • + + Around You +
    • + +
  • + + Top Artists +
    • +
  • + {" "} + + Top Charts +
    • + +
+
+ ) +} + +export default Sidebar + \ No newline at end of file diff --git a/src/Components/SongSearch.jsx b/src/Components/SongSearch.jsx index fff5c07..f3cb8bc 100644 --- a/src/Components/SongSearch.jsx +++ b/src/Components/SongSearch.jsx @@ -5,7 +5,7 @@ import { useNavigate } from "react-router-dom"; // assets import Background from "/bag.jpg"; import Search from '../assets/search.svg'; -import Navbar from "./Navbar"; + import Footer from "./Footer"; import "../App.css"; @@ -54,7 +54,7 @@ export default function SongSearch() { className="w-full bg-cover bg-center" style={{ backgroundImage: `url(${Background})` }} > - +