index.tsx

import { Link } from "@remix-run/react";
import Note from "~/models/Note";
import styles from "./styles.css";

export default function NoteList({ notes }: { notes: Note[] }) {
  return (
    <>
      <p id="warning">
        ⚠️ The data from this page is dynamically entered by users. The author of this project assumes no
        responsibility for this content. ⚠️
      </p>
      <ul id="note-list">
        {notes.map((note, index) => (
          <li key={note.id} className="note">
            <Link to={note.id}>
              <article>
                <header>
                  <ul className="note-meta">
                    <li>#{index + 1}</li>
                    <li>
                      <time dateTime={note.date}>
                        {new Date(note.date).toLocaleDateString("en-US", {
                          day: "numeric",
                          month: "short",
                          year: "numeric",
                          hour: "2-digit",
                          minute: "2-digit",
                        })}
                      </time>
                    </li>
                  </ul>
                  <h2>{note.title}</h2>
                </header>
                <p>{note.content}</p>
              </article>
            </Link>
          </li>
        ))}
      </ul>
    </>
  );
}

export function links() {
  return [{ rel: "stylesheet", href: styles }];
}