mbrucedogs/singsalot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Signed-off-by: mbrucedogs <mbrucedogs@gmail.com>

Browse Source
This commit is contained in:
mbrucedogs 2025-07-20 20:57:53 -05:00
parent aad198d533
commit 1347f582bc
1 changed files with 33 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/common/SelectSinger.tsx
View File

@ -11,6 +11,8 @@ import { selectSingersArray, selectControllerName, selectQueueObject } from '../
import { queueService } from '../../firebase/services'; import { queueService } from '../../firebase/services';
import { useToast } from '../../hooks/useToast'; import { useToast } from '../../hooks/useToast';
import { ModalHeader } from './ModalHeader'; import { ModalHeader } from './ModalHeader';
import { NumberDisplay } from './NumberDisplay';
import { SongInfoDisplay } from './SongItem';
import type { Song, Singer, QueueItem } from '../../types'; import type { Song, Singer, QueueItem } from '../../types';
interface SelectSingerProps { interface SelectSingerProps {
@ -75,29 +77,40 @@ const SelectSinger: React.FC<SelectSingerProps> = ({ isOpen, onClose, song }) =>
<IonContent> <IonContent>
{/* Song Information */} {/* Song Information */}
<div className="p-4 border-b border-gray-200 dark:border-gray-700"> <div className="p-4 border-b border-gray-200 dark:border-gray-700">
<h2 className="text-lg font-semibold mb-2">{song.title}</h2> <div style={{ padding: '16px', marginBottom: '20px' }}>
<p className="text-sm text-gray-600 dark:text-gray-400 italic mb-1">{song.artist}</p> <SongInfoDisplay
<p className="text-xs text-gray-500 dark:text-gray-500">{song.path}</p> song={song}
showPath={true}
showCount={false}
/>
</div>
</div> </div>
{/* Singers List */} {/* Singers List */}
<div style={{ padding: '16px', marginBottom: '20px' }}>
<IonList> <IonList>
{singers.map((singer) => ( {singers.map((singer, index) => (
<IonItem <IonItem
key={singer.key} key={singer.key}
button button
onClick={() => handleSelectSinger(singer)} onClick={() => handleSelectSinger(singer)}
disabled={isLoading} disabled={isLoading}
detail={false}
style={{ '--padding-start': '0px', '--min-height': '60px' }}
> >
{/* Order Number */}
<NumberDisplay number={index + 1} />
{/* Singer Name */}
<IonLabel> <IonLabel>
<h2>{singer.name}</h2> <div className="ion-text-bold ion-color-primary" style={{ lineHeight: '1.5', fontSize: '1rem' }}>
<p className="text-sm text-gray-500 dark:text-gray-400"> {singer.name}
Last login: {new Date(singer.lastLogin).toLocaleDateString()} </div>
</p>
</IonLabel> </IonLabel>
</IonItem> </IonItem>
))} ))}
</IonList> </IonList>
</div>
{singers.length === 0 && ( {singers.length === 0 && (
<div className="p-4 text-center text-gray-500 dark:text-gray-400"> <div className="p-4 text-center text-gray-500 dark:text-gray-400">