Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Built out Members Search Tracks Page #1

Merged
merged 2 commits into from
Feb 12, 2025
Merged

Built out Members Search Tracks Page #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
00e098e
Built out the Members Search Tracks Page
KalimsCodingWonderland Feb 12, 2025
29195d1
Fixed Toggle Switch
KalimsCodingWonderland Feb 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
191 changes: 191 additions & 0 deletions src/apps/members/pages/SearchTracks.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,191 @@
/* Global theme variables should be defined at the root.
This file assumes variables like --color-surface,
--color-primary-container, --color-primary-contrast,
and --color-surface-container are available.
*/

.search-tracks {
background-color: var(--color-surface);
min-height: 100vh;
font-family: sans-serif;
color: var(--color-primary-contrast);

/* HEADER STYLES */
.search-header {
background-color: var(--color-primary-container); // brown banner style
color: var(--color-primary-contrast);
padding: 1rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;

.header-left {
.dropdown {
position: relative;
.dropdown-button {
background: none;
border: none;
color: var(--color-primary-contrast);
font-size: 1.2rem;
cursor: pointer;
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.25rem 0.5rem;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
background-color: var(--color-surface);
border: 1px solid var(--color-surface-container);
border-radius: 4px;
margin-top: 0.5rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
z-index: 1000;
min-width: 150px;
display: flex;
flex-direction: column;
.dropdown-item {
padding: 0.5rem 1rem;
text-decoration: none;
color: var(--color-primary-contrast);
font-size: 1rem;
&:hover {
background-color: brown;
color: var(--color-surface);
}
}
}
}
}

.header-right {
display: flex;
align-items: center;
nav {
ul {
list-style: none;
display: flex;
margin: 0;
padding: 0;
li {
margin-left: 1rem;
a {
text-decoration: none;
color: var(--color-primary-contrast);
font-size: 1rem;
}
}
}
}
/* Theme Toggle Switch */
.theme-toggle-switch {
width: 50px;
height: 25px;
background-color: var(--color-surface-container);
border-radius: 25px;
position: relative;
cursor: pointer;
margin-left: 1rem;
}
.switch-thumb {
position: absolute;
top: 2px;
left: 2px;
width: 21px;
height: 21px;
background-color: var(--color-primary-contrast);
border-radius: 50%;
transition: left 0.3s ease;
}
.switch-thumb.dark {
left: calc(100% - 2px - 21px);
}
}
}

/* MAIN CONTENT STYLES */
.search-main {
padding: 2rem;
max-width: 800px;
margin: 0 auto;

.title {
text-align: center;
font-size: 2.5rem; // similar to clock font style
color: var(--color-primary-contrast);
margin-bottom: 2rem;
}

.search-form {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
margin-bottom: 2rem;

input[type='text'] {
padding: 0.8rem;
font-size: 1rem;
border: 1px solid var(--color-surface);
border-radius: 4px;
flex: 1;
min-width: 200px;
}

.search-button {
padding: 0.8rem 1.5rem;
font-size: 1rem;
background-color: var(--color-primary-container);
color: var(--color-primary-contrast);
border: none;
border-radius: 4px;
cursor: pointer;
}
}

.song-results {
display: flex;
flex-direction: column;
gap: 1rem;

.song-card {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem;
background-color: var(--color-surface);
border: 1px solid var(--color-surface-container);
border-radius: 4px;

.song-info {
flex: 1;
}

.add-button {
background-color: var(--color-primary-container);
color: var(--color-primary-contrast);
border: none;
border-radius: 50%;
width: 2rem;
height: 2rem;
font-size: 1.5rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
}
}
}
}

/* Adjust song card border colors based on theme mode */
html[data-theme-mode="light"] .song-card {
border-color: black;
}

html[data-theme-mode="dark"] .song-card {
border-color: white;
}
121 changes: 121 additions & 0 deletions src/apps/members/pages/SearchTracks.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
import React, { useState, useRef, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { ThemeManager } from 'src/utils/ui/themeManager';
import './searchtracks.scss';

const dummySongs = [
{ id: 1, title: 'Song One', album: 'Album One', artist: 'Artist One' },
{ id: 2, title: 'Song Two', album: 'Album Two', artist: 'Artist Two' },
{ id: 3, title: 'Song Three', album: 'Album Three', artist: 'Artist Three' },
{ id: 4, title: 'Song Four', album: 'Album Four', artist: 'Artist Four' },
{ id: 5, title: 'Song Five', album: 'Album Five', artist: 'Artist Five' },
];

const SearchTracks = () => {
const [dropdownOpen, setDropdownOpen] = useState(false);
const [theme, setTheme] = useState(ThemeManager.getInstance().getMode());
const dropdownRef = useRef<HTMLDivElement>(null);

const toggleDropdown = () => {
setDropdownOpen((prev) => !prev);
};

useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (
dropdownRef.current &&
!dropdownRef.current.contains(event.target as Node)
) {
setDropdownOpen(false);
}
};
document.addEventListener('mousedown', handleClickOutside);
return () =>
document.removeEventListener('mousedown', handleClickOutside);
}, []);

const toggleTheme = () => {
const themeManager = ThemeManager.getInstance();
const newMode = theme === 'light' ? 'dark' : 'light';
themeManager.setMode(newMode);
setTheme(newMode);
};

return (
<div className="search-tracks">
<header className="search-header">
<div className="header-left">
<div className="dropdown" ref={dropdownRef}>
<button className="dropdown-button" onClick={toggleDropdown}>
Open Source Clubs Jukebox{' '}
<span className="arrow">{dropdownOpen ? '▲' : '▼'}</span>
</button>
{dropdownOpen && (
<div className="dropdown-menu">
<Link className="dropdown-item" to="/auth/login">
Login
</Link>
<Link className="dropdown-item" to="/auth/logout">
Logout
</Link>
</div>
)}
</div>
</div>
<div className="header-right">
<nav>
<ul>
<li>
<Link to="/jukebox">Jukebox</Link>
</li>
<li>
<Link to="/search">Search Songs</Link>
</li>
<li>
<Link to="/other">Other</Link>
</li>
</ul>
</nav>
{/* Toggle Switch for Theme */}
<div className="theme-toggle-switch" onClick={toggleTheme}>
<div className={`switch-thumb ${theme === 'dark' ? 'dark' : ''}`}></div>
</div>
</div>
</header>

<main className="search-main">
<h1 className="title">Search Songs</h1>
<div className="search-form">
<input type="text" placeholder="Song Name" />
<input type="text" placeholder="Album Name" />
<input type="text" placeholder="Artist Name" />
<button className="search-button">Search Tracks</button>
</div>

<div className="song-results">
{dummySongs.map((song) => (
<div key={song.id} className="song-card">
<div className="song-info">
<h2>{song.title}</h2>
<p>
<strong>Album:</strong> {song.album}
</p>
<p>
<strong>Artist:</strong> {song.artist}
</p>
</div>
<button
className="add-button"
onClick={() => alert(`Added "${song.title}" to queue`)}
>
+
</button>
</div>
))}
</div>
</main>
</div>
);
};

export default SearchTracks;
18 changes: 15 additions & 3 deletions src/apps/members/routes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,20 @@
import type { RouteObject } from 'react-router-dom'

import SearchTracks from 'src/apps/members/pages/SearchTracks';
import { Link } from 'react-router-dom';
export const membersRoutes: RouteObject[] = [
{
index: true,
element: <div>Members index</div>,
element: (
<div>
Members index
<br />
<Link to="search">Go to Search Tracks</Link>
</div>
),
},
{
path: 'search', // Depending on nesting, this could be '/members/search' or '/search'
element: <SearchTracks />,
},
]
];