1import type { Note } from "../lib/api.ts";
2
3export const NoteList = ({ notes }: { notes: Note[] }) => {
4 if (notes.length === 0) {
5 return (
6 <p className="rounded-xl border border-dashed border-slate-700 px-4 py-8 text-center text-slate-400">
7 No notes yet.
8 </p>
9 );
10 }
11
12 return (
13 <ul className="flex flex-col gap-3">
14 {notes.map((note) => (
15 <li
16 key={note.id}
17 className="rounded-xl border border-slate-800 bg-slate-900/80 px-4 py-3"
18 >
19 <p className="text-slate-100">{note.body}</p>
20 <p className="mt-1 text-xs text-slate-500">
21 {new Date(note.createdAt).toLocaleString()}
22 </p>
23 </li>
24 ))}
25 </ul>
26 );
27};