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

49
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,7 +57,8 @@ 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
@ -65,45 +68,31 @@ export const ListItem = React.memo(forwardRef<HTMLIonItemElement, GenericListIte
button={button || !!onClick} button={button || !!onClick}
detail={detail} detail={detail}
slot={slot} slot={slot}
style={style}
>
<div style={{ display: 'flex', alignItems: 'center', width: '100%' }}>
{showNumber && number !== undefined && (
<IonLabel slot="start" className="flex-shrink-0 mr-4" style={{ flex: '0 0 auto' }}>
<div className="text-lg font-bold text-gray-500">
{number}
</div>
</IonLabel>
)}
<IonLabel style={{ flex: '1 1 0%', margin: '0 10px' }}>
<div
className="ion-text-bold"
style={{ style={{
fontWeight: 'bold', ...style,
fontSize: '1rem', minHeight: '60px',
color: 'var(--ion-color-dark)', '--padding-start': '16px', // Add left padding for classic Ionic look
marginBottom: '4px' '--min-height': '60px',
}} }}
> >
{/* Number (if enabled) */}
{showNumber && number !== undefined && (
<NumberDisplay number={number} />
)}
{/* Main content */}
<IonLabel>
<div style={{ fontWeight: 'bold', fontSize: '1rem', color: 'var(--ion-color-dark)', marginBottom: 2, overflow: 'hidden', textOverflow: 'ellipsis', wordBreak: 'break-word' }}>
{primaryText} {primaryText}
</div> </div>
{secondaryText && ( {secondaryText && (
<div <div style={{ fontSize: '0.875rem', fontStyle: 'italic', color: 'var(--ion-color-medium)', overflow: 'hidden', textOverflow: 'ellipsis', wordBreak: 'break-word' }}>
className="ion-text-italic ion-color-medium"
style={{
fontSize: '0.875rem',
fontStyle: 'italic',
color: 'var(--ion-color-medium)',
marginBottom: '4px'
}}
>
{secondaryText} {secondaryText}
</div> </div>
)} )}
</IonLabel> </IonLabel>
<div style={{ flex: '0 0 auto' }}>{children}</div> {/* End content */}
<div style={{ flex: '0 0 auto' }}>{endContent}</div> {children && <div style={{ flex: '0 0 auto', marginRight: 8 }}>{children}</div>}
</div> {endContent && <div style={{ flex: '0 0 auto' }}>{endContent}</div>}
{showChevron && ( {showChevron && (
<IonIcon <IonIcon
slot="end" slot="end"