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

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

Browse Source
This commit is contained in:
Matt Bruce 2025-07-19 12:51:06 -05:00
parent e57e107883
commit d654ef41a4
2 changed files with 30 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/common/ListItem.tsx
View File

@ -16,6 +16,11 @@ interface ListItemProps {
chip?: string; chip?: string;
chipColor?: string; chipColor?: string;
disabled?: boolean; disabled?: boolean;
// Additional IonItem props that can be passed through
slot?: string;
detail?: boolean;
button?: boolean;
style?: React.CSSProperties;
} }
export const ListItem: React.FC<ListItemProps> = ({ export const ListItem: React.FC<ListItemProps> = ({
@ -30,7 +35,11 @@ export const ListItem: React.FC<ListItemProps> = ({
endContent, endContent,
chip, chip,
chipColor = 'primary', chipColor = 'primary',
disabled = false disabled = false,
slot,
detail = false,
button,
style
}) => { }) => {
const itemClassName = `list-item ${className}`.trim(); const itemClassName = `list-item ${className}`.trim();
@ -53,11 +62,12 @@ export const ListItem: React.FC<ListItemProps> = ({
return ( return (
<IonItem <IonItem
button={!!onClick && !disabled} button={button !== undefined ? button : (!!onClick && !disabled)}
onClick={onClick} onClick={onClick}
detail={false} detail={detail}
className={itemClassName} className={itemClassName}
style={{ '--min-height': '60px' }} style={{ '--min-height': '60px', ...style }}
slot={slot}
> >
{/* Number (if enabled) */} {/* Number (if enabled) */}
{showNumber && ( {showNumber && (

36
src/features/SongLists/SongLists.tsx
View File

@ -108,27 +108,23 @@ const SongLists: React.FC = () => {
// Available songs get an accordion that expands // Available songs get an accordion that expands
return ( return (
<IonAccordion key={songKey} value={songKey}> <IonAccordion key={songKey} value={songKey}>
<IonItem <ListItem
slot="header" primaryText={songListSong.title}
detail={false} secondaryText={songListSong.artist}
button showNumber={true}
onClick={() => handleSongItemClick(songKey)} number={index + 1}
slot="header"
detail={false}
button={true}
className="list-item" className="list-item"
style={{ '--min-height': '60px' }} style={{ '--min-height': '60px' } as React.CSSProperties}
> onClick={() => handleSongItemClick(songKey)}
{/* Number */} endContent={
<NumberDisplay number={index + 1} /> <IonChip color="primary">
{availableSongs.length} version{availableSongs.length !== 1 ? 's' : ''}
{/* Use TwoLineDisplay for consistent formatting */} </IonChip>
<TwoLineDisplay }
primaryText={songListSong.title} />
secondaryText={songListSong.artist}
/>
<IonChip slot="end" color="primary">
{availableSongs.length} version{availableSongs.length !== 1 ? 's' : ''}
</IonChip>
</IonItem>
<div slot="content" className="bg-gray-50 border-l-4 border-primary"> <div slot="content" className="bg-gray-50 border-l-4 border-primary">
<IonList> <IonList>