Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | 97x 97x 13x | import './RegistrationsList.css';
function RegistrationsList({
registrations,
title = 'Liste des inscrits',
headingLevel = 'h2',
highlightedIndex = null,
testId = 'registrations-list-section',
emptyMessage = 'Aucun inscrit pour le moment.'
}) {
const HeadingTag = headingLevel;
return (
<section className="registrations-section" data-testid={testId}>
<HeadingTag>{title}</HeadingTag>
{registrations.length === 0 ? (
<p data-testid="no-registrations">{emptyMessage}</p>
) : (
<ul data-testid="registrations-list">
{registrations.map((registration, index) => (
<li
key={`${registration.email}-${index}`}
data-testid="registration-item"
data-highlight-index={index}
className={
index === highlightedIndex ? 'registration-item-highlight' : undefined
}
>
{registration.prenom} {registration.nom} - {registration.email} -{' '}
{registration.dateOfBirth} - {registration.ville} ({registration.codePostal})
</li>
))}
</ul>
)}
</section>
);
}
export default RegistrationsList;
|