Skip to content

Commit

Permalink
Merge pull request Satyam1923#224 from yashmandi/feat/settings-page
Browse files Browse the repository at this point in the history 
[FIX] Satyam1923#215 Implemented Settings Page
  • Loading branch information
@Satyam1923
Satyam1923 authored May 31, 2024
2 parents d26c460 + 6d403e4 commit 65004f0
Show file tree
Hide file tree
Showing 1,106 changed files with 301,079 additions and 142 deletions.
279 changes: 139 additions & 140 deletions frontend/src/App.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,16 @@ import Sidebar from "./components/Sidebar";
import Section3 from "./components/Section3";
import waiting from "./Images/neo-sakura-girl-and-dog-waiting-for-the-bus-in-the-rain.gif";
import waiting2 from "./Images/waiting2.gif";
import { FaSearch, FaUser } from 'react-icons/fa'; // Import the profile icon

import { FaSearch, FaUser } from 'react-icons/fa';
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";

// import required modules
import { Pagination, Navigation } from "swiper/modules";
import Settings from "./components/Settings";

const App = () => {
const [data, setData] = useState(null);
Expand Down Expand Up @@ -61,8 +61,6 @@ const App = () => {
try {
const response = await axios.get("https://jio-savaan-private.vercel.app/api/search/songs?query=top songs");
setTopsongs(response.data.data.results);
// console.log("top songs");
// console.log(response.data.data.results);
} catch (error) {
console.error(error);
}
Expand Down Expand Up @@ -109,150 +107,151 @@ const App = () => {
};

return (
<div className="ui">
<Sidebar handleFocus={handleFocus} />
<div className="avatar">
<div className="logo">
<FaUser fontSize="15px" color="white" />
</div>
<div className="text">Username</div>
</div>
<div className="section2">

<div className="searchbar searchbar2">
<input
type="search"
placeholder="Search Song"
name="song"
ref={inputRef}
className="box1"
required
onChange={(e) => {
e.preventDefault();
setSearchQuery(e.target.value);
}}
/>
<button
id="get"
type="image"
src="search.svg"
alt="search"
className="button"
onClick={(e) => {
e.preventDefault();
if (searchQuery !== "") {
console.log("started fetching song....")
fetchSongData();
} else {
console.log("empty input query");
}
}}
>
<div className="homesearchbar">
<FaSearch className="homesearchlogo" />
<p>Search</p>
<Router>
<Routes>
<Route path="/settings" element={<Settings />} />
<Route path="*" element={
<div className="ui">
<Sidebar handleFocus={handleFocus} />
<div className="avatar">
<div className="logo">
<FaUser fontSize="15px" color="white" />
</div>
<div className="text">Username</div>
</div>
</button>
</div>
<div className="section2">

<div className="song_content">
<b>Song Results</b>
<div className="searchbar searchbar2">
<input
type="search"
placeholder="Search Song"
name="song"
ref={inputRef}
className="box1"
required
onChange={(e) => {
e.preventDefault();
setSearchQuery(e.target.value);
}}
/>
<button
id="get"
type="image"
src="search.svg"
alt="search"
className="button"
onClick={(e) => {
e.preventDefault();
if (searchQuery !== "") {
console.log("started fetching song....")
fetchSongData();
} else {
console.log("empty input query");
}
}}
>
<div className="homesearchbar">
<FaSearch className="homesearchlogo" />
<p>Search</p>
</div>
</button>
</div>

<Swiper
onSwiper={setSwiperRef}
slidesPerView={4}
spaceBetween={30}
pagination={{
type: "fraction",
}}
navigation={true}
modules={[Pagination, Navigation]}
className="mySwiper"
>
{data == null ? (
<div className="song_content">
<b>Song Results</b>

''
) : (
data !== null &&
data !== undefined &&
data.map((element, index) => (
<div key={element.id} onClick={() => {
setTopSong(false);
playSong(index)
}}>
<SwiperSlide className="song">
<img
src={element.image[1].url}
alt={element.name}
onClick={() => {
<Swiper
onSwiper={setSwiperRef}
slidesPerView={4}
spaceBetween={30}
pagination={{
type: "fraction",
}}
navigation={true}
modules={[Pagination, Navigation]}
className="mySwiper"
>
{data == null ? (
''
) : (
data !== null &&
data !== undefined &&
data.map((element, index) => (
<div key={element.id} onClick={() => {
setTopSong(false);
playSong(index)
}}
/>
<p onClick={() => {
setTopSong(false);
playSong(index)
}}>
{decodeEntities(element.name)}
</p>
</SwiperSlide>
</div>
))
)}
</Swiper>
}}>
<SwiperSlide className="song">
<img
src={element.image[1].url}
alt={element.name}
onClick={() => {
setTopSong(false);
playSong(index)
}}
/>
<p onClick={() => {
setTopSong(false);
playSong(index)
}}>
{decodeEntities(element.name)}
</p>
</SwiperSlide>
</div>
))
)}
</Swiper>

<b>Recents</b>
<Swiper
onSwiper={setSwiperRef}
slidesPerView={4}
// centeredSlides={true}
spaceBetween={30}
pagination={{
type: "fraction",
}}
navigation={true}
modules={[Pagination, Navigation]}
className="mySwiper"
>
{data == null ? (
''

) : (
data !== null &&
data !== undefined &&
data.map((element, index) => (
<div key={element.id} onClick={() => {
setTopSong(false);
playSong(index)
}}>
<SwiperSlide className="song">
<img
src={element.image[2].url}
height={"60%"}
alt={element.name}
onClick={() => {
<b>Recents</b>
<Swiper
onSwiper={setSwiperRef}
slidesPerView={4}
spaceBetween={30}
pagination={{
type: "fraction",
}}
navigation={true}
modules={[Pagination, Navigation]}
className="mySwiper"
>
{data == null ? (
''
) : (
data !== null &&
data !== undefined &&
data.map((element, index) => (
<div key={element.id} onClick={() => {
setTopSong(false);
playSong(index)
}}
/>
<p onClick={() => {
setTopSong(false);
playSong(index)
}}>
{decodeEntities(element.name)}
</p>
</SwiperSlide>
</div>
))
)}
</Swiper>
</div>


</div>

<Section3 data={data} index={currplaying} playSong={playSong} topsongs={topsongs} isTopSong={isTopSong} setTopSong={setTopSong} />
</div>
}}>
<SwiperSlide className="song">
<img
src={element.image[2].url}
height={"60%"}
alt={element.name}
onClick={() => {
setTopSong(false);
playSong(index)
}}
/>
<p onClick={() => {
setTopSong(false);
playSong(index)
}}>
{decodeEntities(element.name)}
</p>
</SwiperSlide>
</div>
))
)}
</Swiper>
</div>
</div>
<Section3 data={data} index={currplaying} playSong={playSong} topsongs={topsongs} isTopSong={isTopSong} setTopSong={setTopSong} />
</div>
} />
</Routes>
</Router>
);
};

Expand Down
6 changes: 6 additions & 0 deletions frontend/src/components/Section3.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,9 @@ import "react-h5-audio-player/lib/styles.css";
import he from "he";
import { IoIosLogIn } from "react-icons/io";
import { RiNotification3Fill } from "react-icons/ri";
import { IoSettings } from "react-icons/io5";
import { Link } from "react-router-dom";


const Section3 = ({ data, index, topsongs, playSong, isTopSong, setTopSong }) => {

Expand All @@ -16,6 +19,9 @@ const Section3 = ({ data, index, topsongs, playSong, isTopSong, setTopSong }) =>
<div className="links">
<div className="link"><IoIosLogIn fontSize={"25px"} color={"white"} /></div>
<div className="link"><RiNotification3Fill fontSize={"25px"} color={"white"} /></div>
<Link to="/settings">
<div className="link"><IoSettings fontSize={"25px"} color={"white"} /></div>
</Link>
</div>


Expand Down
50 changes: 50 additions & 0 deletions frontend/src/components/Settings.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
.settings-page {
display: flex;
height: 100vh;
width: 100vw;
/* Adjusted to cover the full viewport width */
}

.settings-sidebar {
width: 250px;
/* Adjusted width for a typical sidebar */
background-color: #1e1e1e;
padding: 20px;
position: fixed;
/* Make the sidebar stick to the left */
height: 100vh;
/* Ensure the sidebar covers the full height of the viewport */
overflow-y: auto;
/* Enable scrolling if content exceeds the height */
}

.settings-sidebar ul {
list-style: none;
padding: 0;
}

.settings-sidebar li {
margin: 20px 0;
/* Increased margin for more bottom gap */
cursor: pointer;
color: #ffffff;
/* Default color */
}

.settings-sidebar li:hover,
.settings-sidebar li.active {
color: #7373cc;
/* Highlight color */
}

.settings-content {
margin-left: 250px;
/* Same as the sidebar width */
flex-grow: 1;
padding: 25px;
background-color: #282828;
overflow-y: auto;
/* Enable scrolling if content exceeds the height */
height: 100vh;
/* Ensure the content area covers the full height of the viewport */
}
Loading

0 comments on commit 65004f0

Please sign in to comment.