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 { chevronForward } from 'ionicons/icons';
import type { Song } from '../../types';
import { NumberDisplay } from './NumberDisplay';
// Generic ListItem interface for different types of data
interface GenericListItemProps {
@ -18,6 +19,7 @@ interface GenericListItemProps {
button?: boolean;
style?: React.CSSProperties;
endContent?: React.ReactNode;
showSeparator?: boolean;
}
// Song-specific ListItem interface
@ -55,59 +57,46 @@ export const ListItem = React.memo(forwardRef<HTMLIonItemElement, GenericListIte
detail = false,
button = false,
style,
endContent
endContent,
showSeparator, // keep for API compatibility, but not used
}, ref) => {
return (
<IonItem
<IonItem
ref={ref}
className={className}
onClick={onClick}
button={button || !!onClick}
detail={detail}
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%' }}>
{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={{
fontWeight: 'bold',
fontSize: '1rem',
color: 'var(--ion-color-dark)',
marginBottom: '4px'
}}
>
{primaryText}
{/* 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}
</div>
{secondaryText && (
<div style={{ fontSize: '0.875rem', fontStyle: 'italic', color: 'var(--ion-color-medium)', overflow: 'hidden', textOverflow: 'ellipsis', wordBreak: 'break-word' }}>
{secondaryText}
</div>
{secondaryText && (
<div
className="ion-text-italic ion-color-medium"
style={{
fontSize: '0.875rem',
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>
)}
</IonLabel>
{/* End content */}
{children && <div style={{ flex: '0 0 auto', marginRight: 8 }}>{children}</div>}
{endContent && <div style={{ flex: '0 0 auto' }}>{endContent}</div>}
{showChevron && (
<IonIcon
slot="end"
icon={chevronForward}
<IonIcon
slot="end"
icon={chevronForward}
className="ion-color-medium"
/>
)}