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;
chipColor?: string;
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> = ({
@ -30,7 +35,11 @@ export const ListItem: React.FC<ListItemProps> = ({
endContent,
chip,
chipColor = 'primary',
disabled = false
disabled = false,
slot,
detail = false,
button,
style
}) => {
const itemClassName = `list-item ${className}`.trim();
@ -53,11 +62,12 @@ export const ListItem: React.FC<ListItemProps> = ({
return (
<IonItem
button={!!onClick && !disabled}
button={button !== undefined ? button : (!!onClick && !disabled)}
onClick={onClick}
detail={false}
detail={detail}
className={itemClassName}
style={{ '--min-height': '60px' }}
style={{ '--min-height': '60px', ...style }}
slot={slot}
>
{/* Number (if enabled) */}
{showNumber && (

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

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