Merge pull request #115 from Ryan-slither/Music-Pages

Music pages

src/apps/admin/components/Sidebar.tsx

@@ -264,8 +264,8 @@ export const Sidebar = (props: { className?: string }) => {
                 </span>
                 {isDropdown1Open && (
                   <div className="navbar__dropdown__content">
-                    <a href="#">Track Queue</a>
-                    <a href="#">Search</a>
+                    <NavLink to="/admin/music/queue">Track Queue</NavLink>
+                    <NavLink to="/admin/music/search">Search</NavLink>
                   </div>
                 )}
               </li>

src/apps/admin/pages/Music.scss

@@ -0,0 +1,23 @@
+.musicTitle {
+  @include font-display('sm');
+  color: var(--color-primary-contrast);
+  margin-bottom: 1vh;
+  width: fit-content;
+  text-shadow: 1px 3px 2px darkgrey;
+}
+
+.music-page-switch {
+  @include font-label('sm', 300);
+  display: inline-block;
+  margin-bottom: 5vh;
+}
+
+.music-page-link {
+  color: var(--color-primary-surface);
+}
+
+.music-page-link:active,
+.music-page-link:focus,
+.music-page-link:focus-visible {
+  border-bottom: 2.5px solid #0a98b4
+}

src/apps/admin/pages/Music.tsx

@@ -0,0 +1,22 @@
+import { Link, Outlet } from 'react-router-dom'
+import './Music.scss'
+
+export const Music = () => {
+  return (
+    <div className="container">
+      <div className="musicTitle">Music</div>
+      <span className="music-page-switch">
+        <Link className="music-page-link" to="/admin/music/queue">
+          Track Queue
+        </Link>{' '}
+        |{' '}
+        <Link className="music-page-link" to="/admin/music/search">
+          Search Tracks
+        </Link>
+      </span>
+      <div>
+        <Outlet />
+      </div>
+    </div>
+  )
+}

src/apps/admin/pages/MusicQueue.scss

@@ -0,0 +1,22 @@
+.music-queue_container h1 {
+  @include font-headline('sm', 600);
+}
+
+.music-queue_container {
+  display: flex;
+  flex-direction: column;
+  gap: 1%;
+}
+
+.next_up_container {
+  display: flex;
+  flex-direction: column;
+  gap: 2vh;
+}
+
+.recently_played_container {
+  margin-top: 2vh;
+  display: flex;
+  flex-direction: column;
+  gap: 2vh;
+}

src/apps/admin/pages/MusicQueue.tsx

@@ -0,0 +1,24 @@
+import { mockTrack } from 'src/mock'
+import './MusicQueue.scss'
+import { Track } from './Track'
+
+const track = mockTrack
+export const MusicQueue = () => {
+  return (
+    <div className="music-queue_container">
+      <div className="next_up_container">
+        <h1>Next Up</h1>
+        <Track track={track} />
+        <Track track={track} />
+        <Track track={track} />
+      </div>
+      <div className="recently_played_container">
+        <h1>Recently Played</h1>
+        <Track track={track} />
+        <Track track={track} />
+        <Track track={track} />
+        <Track track={track} />
+      </div>
+    </div>
+  )
+}

src/apps/admin/pages/MusicSearch.scss

@@ -0,0 +1,52 @@
+.music-search-title {
+  @include font-headline('sm');
+  padding-bottom: 2vh;
+}
+
+.music-search-form * {
+  color: var(--color-primary-surface);
+  @include font-label('sm', 300);
+  width: 100%;
+}
+
+.music-search-input {
+  border: 1px solid black;
+  border-radius: 5px;
+  opacity: 50%;
+  padding: 1vh 1vh 1vh 1vh;
+  height: 5vh;
+  width: 100%;
+}
+
+.music-search-input:focus {
+  outline: none;
+}
+
+.music-search-row {
+  display: block;
+  height: 2vh;
+  gap: 20px !important;
+}
+
+.music-search-button-container {
+  grid-column: 11 / span 2 !important;
+}
+
+.music-search-button {
+  height: 5vh;
+  outline: none;
+  border: none;
+  border-radius: 50px;
+  background-color: var(--color-primary-contrast);
+  color: var(--color-primary-on);
+}
+
+.result-container {
+  margin-top: 8vh;
+}
+
+.track-container {
+  display: flex;
+  flex-direction: column;
+  gap: 2vh;
+}

src/apps/admin/pages/MusicSearch.tsx

@@ -0,0 +1,71 @@
+import { useState, type ChangeEvent, type FormEvent } from 'react'
+import { mockTrack } from 'src/mock'
+import './MusicSearch.scss'
+import { Track } from './Track'
+
+const track = mockTrack
+const trackArray = [track, track, track, track]
+export const MusicSearch = () => {
+  const [inputs, setInputs] = useState({ track: '', album: '', artist: '' })
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const name = event.target.name
+    const value = event.target.value
+    setInputs((values) => ({ ...values, [name]: value }))
+  }
+
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+  }
+
+  return (
+    <div>
+      <div className="music-search-title">Spotify Search</div>
+      <form className="music-search-form" onSubmit={handleSubmit}>
+        <div className="music-search-row grid col-12">
+          <div className="col-3">
+            <input
+              className="music-search-input"
+              type="text"
+              name="track"
+              value={inputs.track || ''}
+              onChange={handleChange}
+              placeholder="Track Name"
+            ></input>
+          </div>
+          <div className="col-3">
+            <input
+              className="music-search-input"
+              type="text"
+              name="album"
+              value={inputs.album || ''}
+              onChange={handleChange}
+              placeholder="Album Name"
+            ></input>
+          </div>
+          <div className="col-3">
+            <input
+              className="music-search-input"
+              type="text"
+              name="artist"
+              value={inputs.artist || ''}
+              onChange={handleChange}
+              placeholder="Artist Name"
+            ></input>
+          </div>
+          <div className="music-search-button-container col-2">
+            <button className="music-search-button">Search Tracks</button>
+          </div>
+        </div>
+      </form>
+      <div className="result-container">
+        <div className="music-search-title">Results</div>
+        <div className="track-container">
+          {trackArray.map((track) => {
+            return <Track track={track} />
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}

src/apps/admin/routes.tsx

@@ -1,7 +1,10 @@
-import type { RouteObject } from 'react-router-dom'
+import { Outlet, type RouteObject } from 'react-router-dom'
 import { Dashboard } from './layout/Dashboard'
 import { Overview } from './pages'
 import { AdminBoard } from './pages/AdminBoard'
+import { MusicSearch } from './pages/MusicSearch'
+import { Music } from './pages/Music'
+import { MusicQueue } from './pages/MusicQueue'
 
 export const adminOutlet = <Dashboard />
 
@@ -16,21 +19,21 @@ export const adminRoutes: RouteObject[] = [
   },
   {
     path: 'music',
-    element: <div>Music</div>,
+    element: <Music />,
     children: [
       {
         path: 'search',
-        element: <div>Music Search</div>,
+        element: <MusicSearch />,
       },
       {
         path: 'queue',
-        element: <div>Music Song Queue</div>,
+        element: <MusicQueue />,
       },
     ],
   },
   {
     path: 'jam-sessions',
-    element: <div>Jam Sessions</div>,
+    // element: <div>Jam Sessions</div>,
     children: [
       {
         path: 'leaderboard',