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-21 09:55:53 -05:00
parent 43bb456058
commit 318707b990
1 changed files with 31 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,6 +2,7 @@ import React, { forwardRef, useMemo } from 'react';
import { IonItem, IonLabel, IonIcon } from '@ionic/react'; import { IonItem, IonLabel, IonIcon } from '@ionic/react';
import { chevronForward } from 'ionicons/icons'; import { chevronForward } from 'ionicons/icons';
import type { Song } from '../../types'; import type { Song } from '../../types';
import { NumberDisplay } from './NumberDisplay';
// Generic ListItem interface for different types of data // Generic ListItem interface for different types of data
interface GenericListItemProps { interface GenericListItemProps {
@ -18,6 +19,7 @@ interface GenericListItemProps {
button?: boolean; button?: boolean;
style?: React.CSSProperties; style?: React.CSSProperties;
endContent?: React.ReactNode; endContent?: React.ReactNode;
showSeparator?: boolean;
} }
// Song-specific ListItem interface // Song-specific ListItem interface
@ -55,59 +57,46 @@ export const ListItem = React.memo(forwardRef<HTMLIonItemElement, GenericListIte
detail = false, detail = false,
button = false, button = false,
style, style,
endContent endContent,
showSeparator, // keep for API compatibility, but not used
}, ref) => { }, ref) => {
return ( return (
<IonItem <IonItem
ref={ref} ref={ref}
className={className} className={className}
onClick={onClick} onClick={onClick}
button={button || !!onClick} button={button || !!onClick}
detail={detail} detail={detail}
slot={slot} slot={slot}
style={style} style={{
...style,
minHeight: '60px',
'--padding-start': '16px', // Add left padding for classic Ionic look
'--min-height': '60px',
}}
> >
<div style={{ display: 'flex', alignItems: 'center', width: '100%' }}> {/* Number (if enabled) */}
{showNumber && number !== undefined && ( {showNumber && number !== undefined && (
<IonLabel slot="start" className="flex-shrink-0 mr-4" style={{ flex: '0 0 auto' }}> <NumberDisplay number={number} />
<div className="text-lg font-bold text-gray-500"> )}
{number} {/* Main content */}
</div> <IonLabel>
</IonLabel> <div style={{ fontWeight: 'bold', fontSize: '1rem', color: 'var(--ion-color-dark)', marginBottom: 2, overflow: 'hidden', textOverflow: 'ellipsis', wordBreak: 'break-word' }}>
)} {primaryText}
<IonLabel style={{ flex: '1 1 0%', margin: '0 10px' }}> </div>
<div {secondaryText && (
className="ion-text-bold" <div style={{ fontSize: '0.875rem', fontStyle: 'italic', color: 'var(--ion-color-medium)', overflow: 'hidden', textOverflow: 'ellipsis', wordBreak: 'break-word' }}>
style={{ {secondaryText}
fontWeight: 'bold',
fontSize: '1rem',
color: 'var(--ion-color-dark)',
marginBottom: '4px'
}}
>
{primaryText}
</div> </div>
{secondaryText && ( )}
<div </IonLabel>
className="ion-text-italic ion-color-medium" {/* End content */}
style={{ {children && <div style={{ flex: '0 0 auto', marginRight: 8 }}>{children}</div>}
fontSize: '0.875rem', {endContent && <div style={{ flex: '0 0 auto' }}>{endContent}</div>}
fontStyle: 'italic',
color: 'var(--ion-color-medium)',
marginBottom: '4px'
}}
>
{secondaryText}
</div>
)}
</IonLabel>
<div style={{ flex: '0 0 auto' }}>{children}</div>
<div style={{ flex: '0 0 auto' }}>{endContent}</div>
</div>
{showChevron && ( {showChevron && (
<IonIcon <IonIcon
slot="end" slot="end"
icon={chevronForward} icon={chevronForward}
className="ion-color-medium" className="ion-color-medium"
/> />
)} )}