38 lines
1.2 KiB
TypeScript
38 lines
1.2 KiB
TypeScript
import type { NoteListProps } from '../interfaces/note-list'
|
||
|
||
const EMPTY_MESSAGE = 'Aucune note pour le moment.\nTouchez + pour en créer une.'
|
||
|
||
function NoteList({ notes, onSelect }: NoteListProps) {
|
||
if (notes.length === 0) {
|
||
return (
|
||
<div className="flex flex-col items-center justify-center gap-2 py-16 text-center">
|
||
<p className="whitespace-pre-line text-gray-500">{EMPTY_MESSAGE}</p>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<ul className="flex flex-col divide-y divide-gray-100 overflow-hidden rounded-2xl bg-white shadow-sm">
|
||
{notes.map((note) => (
|
||
<li key={note.id}>
|
||
<button
|
||
type="button"
|
||
onClick={() => onSelect(note.id)}
|
||
aria-label={note.title ? `Ouvrir la note ${note.title}` : 'Ouvrir la note Sans titre'}
|
||
className="flex w-full min-h-14 items-center justify-between gap-3 px-4 py-5 text-left text-base active:bg-gray-50"
|
||
>
|
||
<span className={note.title ? 'text-gray-800' : 'italic text-gray-400'}>
|
||
{note.title || 'Sans titre'}
|
||
</span>
|
||
<span aria-hidden="true" className="text-gray-400">
|
||
›
|
||
</span>
|
||
</button>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
)
|
||
}
|
||
|
||
export default NoteList
|