Merge pull request #16 from sumeet-srknec/feature

Fixing #15
sumeet-srknec · Oct 7, 2024 · 9c908a1 · 9c908a1
2 parents 81e1068 + c21423d
commit 9c908a1
Show file tree

Hide file tree

Showing 2 changed files with 143 additions and 112 deletions.
diff --git a/frontend/src/components/service/DataService.jsx b/frontend/src/components/service/DataService.jsx
@@ -0,0 +1,136 @@
+import React from 'react'
+import { FaBars, FaListUl } from 'react-icons/fa6'
+import { HiBars2, HiMiniBars3 } from 'react-icons/hi2'
+import { IoGridOutline } from 'react-icons/io5'
+
+export const fetchSongs = () => {
+ return [
+ {
+ name: 'You are G.O.A.T',
+ singer: 'DJ',
+ runtime: '3:52',
+ album: 'G.O.A.T'
+ }
+ ]
+}
+
+export const fetchTypes = () => {
+ return [
+ { key: 'playlists', label: 'Playlists' },
+ { key: 'podcasts', label: 'Podcasts' },
+ { key: 'albums', label: 'Albums' },
+ { key: 'artists', label: 'Artists' },
+ { key: 'downloaded', label: 'Downloaded' }
+ ]
+}
+
+export const fetchSortOptions = () => {
+ return [
+ { key: 'Recents', label: 'Recents' },
+ { key: 'Recently Added', label: 'Recently Added' },
+ { key: 'Alphabetical', label: 'Alphabetical' },
+ { key: 'Creator', label: 'Creator' }
+ ]
+}
+
+export const fetchViewOptions = () => {
+ return [
+ {
+ logo: <FaBars className="h-3 w-3 font-bold" />,
+ label: 'Compact',
+ key: 'Compact'
+ },
+ {
+ logo: <FaListUl className="h-3 w-3 font-bold" />,
+ label: 'List',
+ key: 'List'
+ },
+ {
+ logo: <IoGridOutline className="h-3 w-3 font-bold" />,
+ label: 'Grid',
+ key: 'Grid'
+ }
+ ]
+}
+
+export const fetchMusicContent = () => {
+ return [
+ {
+ logo: <HiBars2 className="h-12 w-12 border rounded cursor-pointer text-orange-400" />,
+ title: 'Liked Songs',
+ count: 117,
+ pinned: true,
+ tags: ['Playlist']
+ },
+ {
+ logo: <HiMiniBars3 className="h-12 w-12 border rounded cursor-pointer text-orange-400" />,
+ title: 'G.O.A.T',
+ count: 20,
+ pinned: false,
+ tags: ['Playlist']
+ },
+ {
+ logo: <HiMiniBars3 className="h-12 w-12 border rounded cursor-pointer text-orange-400" />,
+ title: 'My Universe',
+ count: 20,
+ pinned: false,
+ tags: ['Albums']
+ },
+ {
+ logo: <HiMiniBars3 className="h-12 w-12 border rounded cursor-pointer text-orange-400" />,
+ title: 'Decatholon Podcasts',
+ count: 20,
+ pinned: false,
+ tags: ['Podcasts']
+ },
+ {
+ logo: <HiMiniBars3 className="h-12 w-12 border rounded cursor-pointer text-orange-400" />,
+ title: 'BWood Folks',
+ count: 20,
+ pinned: false,
+ tags: ['Playlist']
+ },
+ {
+ logo: <HiMiniBars3 className="h-12 w-12 border rounded cursor-pointer text-orange-400" />,
+ title: 'Mega Hits',
+ count: 20,
+ pinned: false,
+ tags: ['Playlist']
+ },
+ {
+ logo: <HiMiniBars3 className="h-12 w-12 border rounded cursor-pointer text-orange-400" />,
+ title: 'BWood Folks',
+ count: 20,
+ pinned: false,
+ tags: ['Playlist']
+ },
+ {
+ logo: <HiMiniBars3 className="h-12 w-12 border rounded cursor-pointer text-orange-400" />,
+ title: 'Mega Hits',
+ count: 20,
+ pinned: false,
+ tags: ['Playlist']
+ },
+ {
+ logo: <HiMiniBars3 className="h-12 w-12 border rounded cursor-pointer text-orange-400" />,
+ title: 'BWood Folks',
+ count: 20,
+ pinned: false,
+ tags: ['Playlist']
+ },
+ {
+ logo: <HiMiniBars3 className="h-12 w-12 border rounded cursor-pointer text-orange-400" />,
+ title: 'Mega Hits',
+ count: 20,
+ pinned: false,
+ tags: ['Playlist']
+ },
+ {
+ logo: <HiMiniBars3 className="h-12 w-12 border rounded cursor-pointer text-orange-400" />,
+ title: 'BWood Folks',
+ count: 20,
+ pinned: false,
+ tags: ['Playlist']
+ }
+ ]
+}
diff --git a/frontend/src/components/shared/Navigation.jsx b/frontend/src/components/shared/Navigation.jsx
@@ -1,12 +1,12 @@
 import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react'
 import classNames from 'classnames'
 import React, { useState } from 'react'
-import { FaBars, FaListUl, FaPlay } from 'react-icons/fa6'
+import { FaListUl, FaPlay } from 'react-icons/fa6'
 import { HiCheck, HiSearch } from 'react-icons/hi'
-import { HiArrowRight, HiBars2, HiMiniBars3, HiPlus } from 'react-icons/hi2'
-import { IoGridOutline } from 'react-icons/io5'
+import { HiArrowRight, HiPlus } from 'react-icons/hi2'
 import { RiPushpinFill } from 'react-icons/ri'
 import { VscLibrary } from 'react-icons/vsc'
+import { fetchMusicContent, fetchSortOptions, fetchTypes, fetchViewOptions } from '../service/DataService'
 import SpotButton from './SpotButton'
 
 function Navigation() {
@@ -54,13 +54,7 @@ function Navigation() {
  </div>
  {navClosed === false && (
  <div className="flex flex-row gap-1 items-center justify-center cursor-pointer">
- {[
- { key: 'playlists', label: 'Playlists' },
- { key: 'podcasts', label: 'Podcasts' },
- { key: 'albums', label: 'Albums' },
- { key: 'artists', label: 'Artists' },
- { key: 'downloaded', label: 'Downloaded' }
- ].map((item) => {
+ {fetchTypes().map((item) => {
  return (
  <div
  key={item.key}
@@ -98,12 +92,7 @@ function Navigation() {
  >
  <div>
  <span className="p-2 text-xs text-gray-400 font-bold">Sort by</span>
- {[
- { key: 'Recents', label: 'Recents' },
- { key: 'Recently Added', label: 'Recently Added' },
- { key: 'Alphabetical', label: 'Alphabetical' },
- { key: 'Creator', label: 'Creator' }
- ].map((item) => {
+ {fetchSortOptions().map((item) => {
  return (
  <div
  key={item.key}
@@ -122,23 +111,7 @@ function Navigation() {
 
  <div>
  <span className="p-2 text-xs text-gray-400 font-bold">View as</span>
- {[
- {
- logo: <FaBars className="h-3 w-3 font-bold" />,
- label: 'Compact',
- key: 'Compact'
- },
- {
- logo: <FaListUl className="h-3 w-3 font-bold" />,
- label: 'List',
- key: 'List'
- },
- {
- logo: <IoGridOutline className="h-3 w-3 font-bold" />,
- label: 'Grid',
- key: 'Grid'
- }
- ].map((item) => {
+ {fetchViewOptions().map((item) => {
  return (
  <div
  key={item.key}
@@ -163,85 +136,7 @@ function Navigation() {
  )}
  {navClosed === false && (
  <div className="flex flex-col gap-2 h-full overflow-y-auto scrollbar scrollbar-thumb-gray-700 scrollbar-track-inherit ">
- {[
- {
- logo: <HiBars2 className="h-12 w-12 border rounded cursor-pointer text-orange-400" />,
- title: 'Liked Songs',
- count: 117,
- pinned: true,
- tags: ['Playlist']
- },
- {
- logo: <HiMiniBars3 className="h-12 w-12 border rounded cursor-pointer text-orange-400" />,
- title: 'G.O.A.T',
- count: 20,
- pinned: false,
- tags: ['Playlist']
- },
- {
- logo: <HiMiniBars3 className="h-12 w-12 border rounded cursor-pointer text-orange-400" />,
- title: 'My Universe',
- count: 20,
- pinned: false,
- tags: ['Albums']
- },
- {
- logo: <HiMiniBars3 className="h-12 w-12 border rounded cursor-pointer text-orange-400" />,
- title: 'Decatholon Podcasts',
- count: 20,
- pinned: false,
- tags: ['Podcasts']
- },
- {
- logo: <HiMiniBars3 className="h-12 w-12 border rounded cursor-pointer text-orange-400" />,
- title: 'BWood Folks',
- count: 20,
- pinned: false,
- tags: ['Playlist']
- },
- {
- logo: <HiMiniBars3 className="h-12 w-12 border rounded cursor-pointer text-orange-400" />,
- title: 'Mega Hits',
- count: 20,
- pinned: false,
- tags: ['Playlist']
- },
- {
- logo: <HiMiniBars3 className="h-12 w-12 border rounded cursor-pointer text-orange-400" />,
- title: 'BWood Folks',
- count: 20,
- pinned: false,
- tags: ['Playlist']
- },
- {
- logo: <HiMiniBars3 className="h-12 w-12 border rounded cursor-pointer text-orange-400" />,
- title: 'Mega Hits',
- count: 20,
- pinned: false,
- tags: ['Playlist']
- },
- {
- logo: <HiMiniBars3 className="h-12 w-12 border rounded cursor-pointer text-orange-400" />,
- title: 'BWood Folks',
- count: 20,
- pinned: false,
- tags: ['Playlist']
- },
- {
- logo: <HiMiniBars3 className="h-12 w-12 border rounded cursor-pointer text-orange-400" />,
- title: 'Mega Hits',
- count: 20,
- pinned: false,
- tags: ['Playlist']
- },
- {
- logo: <HiMiniBars3 className="h-12 w-12 border rounded cursor-pointer text-orange-400" />,
- title: 'BWood Folks',
- count: 20,
- pinned: false,
- tags: ['Playlist']
- }
- ].map((item) => {
+ {fetchMusicContent().map((item) => {
  return (
  <div className="relative flex flex-row items-center gap-4 hover:bg-gray-700 hover:text-white text-gray-400 cursor-pointer rounded p-2 group">
  {item.logo}