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

53
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 */}
<IonList> <div style={{ padding: '16px', marginBottom: '20px' }}>
{singers.map((singer) => ( <IonList>
<IonItem {singers.map((singer, index) => (
key={singer.key} <IonItem
button key={singer.key}
onClick={() => handleSelectSinger(singer)} button
disabled={isLoading} onClick={() => handleSelectSinger(singer)}
> disabled={isLoading}
<IonLabel> detail={false}
<h2>{singer.name}</h2> style={{ '--padding-start': '0px', '--min-height': '60px' }}
<p className="text-sm text-gray-500 dark:text-gray-400"> >
Last login: {new Date(singer.lastLogin).toLocaleDateString()} {/* Order Number */}
</p> <NumberDisplay number={index + 1} />
</IonLabel>
</IonItem> {/* Singer Name */}
))} <IonLabel>
</IonList> <div className="ion-text-bold ion-color-primary" style={{ lineHeight: '1.5', fontSize: '1rem' }}>
{singer.name}
</div>
</IonLabel>
</IonItem>
))}
</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">