Skip to content

Commit 1a125ee

Browse files
IkeHunterIkeHunter
authored
Merge pull request #115 from Ryan-slither/Music-Pages
Music pages
2 parents ffcfe86 + 393ae86 commit 1a125ee

File tree

8 files changed

+224
-7
lines changed

8 files changed

+224
-7
lines changed

‎src/apps/admin/components/Sidebar.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -264,8 +264,8 @@ export const Sidebar = (props: { className?: string }) => {
264264
</span>
265265
{isDropdown1Open && (
266266
<div className="navbar__dropdown__content">
267-
<a href="#">Track Queue</a>
268-
<a href="#">Search</a>
267+
<NavLink to="/admin/music/queue">Track Queue</NavLink>
268+
<NavLink to="/admin/music/search">Search</NavLink>
269269
</div>
270270
)}
271271
</li>

‎src/apps/admin/pages/Music.scss

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
.musicTitle {
2+
@include font-display('sm');
3+
color: var(--color-primary-contrast);
4+
margin-bottom: 1vh;
5+
width: fit-content;
6+
text-shadow: 1px 3px 2px darkgrey;
7+
}
8+
9+
.music-page-switch {
10+
@include font-label('sm', 300);
11+
display: inline-block;
12+
margin-bottom: 5vh;
13+
}
14+
15+
.music-page-link {
16+
color: var(--color-primary-surface);
17+
}
18+
19+
.music-page-link:active,
20+
.music-page-link:focus,
21+
.music-page-link:focus-visible {
22+
border-bottom: 2.5px solid #0a98b4
23+
}

‎src/apps/admin/pages/Music.tsx

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { Link, Outlet } from 'react-router-dom'
2+
import './Music.scss'
3+
4+
export const Music = () => {
5+
return (
6+
<div className="container">
7+
<div className="musicTitle">Music</div>
8+
<span className="music-page-switch">
9+
<Link className="music-page-link" to="/admin/music/queue">
10+
Track Queue
11+
</Link>{' '}
12+
|{' '}
13+
<Link className="music-page-link" to="/admin/music/search">
14+
Search Tracks
15+
</Link>
16+
</span>
17+
<div>
18+
<Outlet />
19+
</div>
20+
</div>
21+
)
22+
}

‎src/apps/admin/pages/MusicQueue.scss

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
.music-queue_container h1 {
2+
@include font-headline('sm', 600);
3+
}
4+
5+
.music-queue_container {
6+
display: flex;
7+
flex-direction: column;
8+
gap: 1%;
9+
}
10+
11+
.next_up_container {
12+
display: flex;
13+
flex-direction: column;
14+
gap: 2vh;
15+
}
16+
17+
.recently_played_container {
18+
margin-top: 2vh;
19+
display: flex;
20+
flex-direction: column;
21+
gap: 2vh;
22+
}

‎src/apps/admin/pages/MusicQueue.tsx

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { mockTrack } from 'src/mock'
2+
import './MusicQueue.scss'
3+
import { Track } from './Track'
4+
5+
const track = mockTrack
6+
export const MusicQueue = () => {
7+
return (
8+
<div className="music-queue_container">
9+
<div className="next_up_container">
10+
<h1>Next Up</h1>
11+
<Track track={track} />
12+
<Track track={track} />
13+
<Track track={track} />
14+
</div>
15+
<div className="recently_played_container">
16+
<h1>Recently Played</h1>
17+
<Track track={track} />
18+
<Track track={track} />
19+
<Track track={track} />
20+
<Track track={track} />
21+
</div>
22+
</div>
23+
)
24+
}

‎src/apps/admin/pages/MusicSearch.scss

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
.music-search-title {
2+
@include font-headline('sm');
3+
padding-bottom: 2vh;
4+
}
5+
6+
.music-search-form * {
7+
color: var(--color-primary-surface);
8+
@include font-label('sm', 300);
9+
width: 100%;
10+
}
11+
12+
.music-search-input {
13+
border: 1px solid black;
14+
border-radius: 5px;
15+
opacity: 50%;
16+
padding: 1vh 1vh 1vh 1vh;
17+
height: 5vh;
18+
width: 100%;
19+
}
20+
21+
.music-search-input:focus {
22+
outline: none;
23+
}
24+
25+
.music-search-row {
26+
display: block;
27+
height: 2vh;
28+
gap: 20px !important;
29+
}
30+
31+
.music-search-button-container {
32+
grid-column: 11 / span 2 !important;
33+
}
34+
35+
.music-search-button {
36+
height: 5vh;
37+
outline: none;
38+
border: none;
39+
border-radius: 50px;
40+
background-color: var(--color-primary-contrast);
41+
color: var(--color-primary-on);
42+
}
43+
44+
.result-container {
45+
margin-top: 8vh;
46+
}
47+
48+
.track-container {
49+
display: flex;
50+
flex-direction: column;
51+
gap: 2vh;
52+
}

‎src/apps/admin/pages/MusicSearch.tsx

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import { useState, type ChangeEvent, type FormEvent } from 'react'
2+
import { mockTrack } from 'src/mock'
3+
import './MusicSearch.scss'
4+
import { Track } from './Track'
5+
6+
const track = mockTrack
7+
const trackArray = [track, track, track, track]
8+
export const MusicSearch = () => {
9+
const [inputs, setInputs] = useState({ track: '', album: '', artist: '' })
10+
11+
const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
12+
const name = event.target.name
13+
const value = event.target.value
14+
setInputs((values) => ({ ...values, [name]: value }))
15+
}
16+
17+
const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
18+
event.preventDefault()
19+
}
20+
21+
return (
22+
<div>
23+
<div className="music-search-title">Spotify Search</div>
24+
<form className="music-search-form" onSubmit={handleSubmit}>
25+
<div className="music-search-row grid col-12">
26+
<div className="col-3">
27+
<input
28+
className="music-search-input"
29+
type="text"
30+
name="track"
31+
value={inputs.track || ''}
32+
onChange={handleChange}
33+
placeholder="Track Name"
34+
></input>
35+
</div>
36+
<div className="col-3">
37+
<input
38+
className="music-search-input"
39+
type="text"
40+
name="album"
41+
value={inputs.album || ''}
42+
onChange={handleChange}
43+
placeholder="Album Name"
44+
></input>
45+
</div>
46+
<div className="col-3">
47+
<input
48+
className="music-search-input"
49+
type="text"
50+
name="artist"
51+
value={inputs.artist || ''}
52+
onChange={handleChange}
53+
placeholder="Artist Name"
54+
></input>
55+
</div>
56+
<div className="music-search-button-container col-2">
57+
<button className="music-search-button">Search Tracks</button>
58+
</div>
59+
</div>
60+
</form>
61+
<div className="result-container">
62+
<div className="music-search-title">Results</div>
63+
<div className="track-container">
64+
{trackArray.map((track) => {
65+
return <Track track={track} />
66+
})}
67+
</div>
68+
</div>
69+
</div>
70+
)
71+
}

‎src/apps/admin/routes.tsx

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
1-
import type { RouteObject } from 'react-router-dom'
1+
import { Outlet, type RouteObject } from 'react-router-dom'
22
import { Dashboard } from './layout/Dashboard'
33
import { Overview } from './pages'
44
import { AdminBoard } from './pages/AdminBoard'
5+
import { MusicSearch } from './pages/MusicSearch'
6+
import { Music } from './pages/Music'
7+
import { MusicQueue } from './pages/MusicQueue'
58

69
export const adminOutlet = <Dashboard />
710

@@ -16,21 +19,21 @@ export const adminRoutes: RouteObject[] = [
1619
},
1720
{
1821
path: 'music',
19-
element: <div>Music</div>,
22+
element: <Music />,
2023
children: [
2124
{
2225
path: 'search',
23-
element: <div>Music Search</div>,
26+
element: <MusicSearch />,
2427
},
2528
{
2629
path: 'queue',
27-
element: <div>Music Song Queue</div>,
30+
element: <MusicQueue />,
2831
},
2932
],
3033
},
3134
{
3235
path: 'jam-sessions',
33-
element: <div>Jam Sessions</div>,
36+
// element: <div>Jam Sessions</div>,
3437
children: [
3538
{
3639
path: 'leaderboard',

0 commit comments

Comments
 (0)