1 files changed, 66 insertions, 0 deletions
diff --git a/bs5/server/pages/NoteItem.re b/bs5/server/pages/NoteItem.re
new file mode 100644
index 0000000..f241cc1
--- /dev/null
+++ b/bs5/server/pages/NoteItem.re
@@ -0,0 +1,66 @@
+open Rsc;
+open Lwt.Syntax;
+
+module NoteView = {
+  [@react.component]
+  let make = (~note: Note.t) => {
+    <div className="h-full">
+      <div
+        className="flex flex-row items-center w-full mb-8 justify-between gap-4">
+        <div className="flex flex-col items-left gap-4" role="menubar">
+          <h1
+            className={Cx.make([
+              "text-4xl font-bold",
+              Theme.text(Theme.Color.Gray12),
+            ])}>
+            {React.string(note.title)}
+          </h1>
+          <Text size=Small role="status" color=Theme.Color.Gray10>
+            {"Last updated on " ++ Date.format_date(note.updated_at)}
+          </Text>
+        </div>
+        <Button noteId={Some(note.id)}> {React.string("Edit")} </Button>
+        <DeleteNoteButton noteId={note.id} />
+      </div>
+      <NotePreview key="note-preview" body={Markdown.to_html(note.content)} />
+    </div>;
+  };
+};
+
+[@react.async.component]
+let make = (~selectedId: option(int), ~isEditing: bool) => {
+  switch (selectedId) {
+  | None when isEditing =>
+    Lwt.return(
+      <NoteEditor noteId=None initialTitle="Untitled" initialBody="" />,
+    )
+  | None =>
+    Lwt.return(
+      <div className="flex flex-col h-full items-center justify-center gap-2">
+        <Text size=XXLarge> "🥺" </Text>
+        <Text> "Click a note on the left to view something!" </Text>
+      </div>,
+    )
+  | Some(id) =>
+    let+ note: result(Note.t, string) = DB.fetch_note(id);
+
+    switch (note) {
+    | Ok(note) when !isEditing => <NoteView note />
+    | Ok(note) =>
+      <NoteEditor
+        noteId={Some(note.id)}
+        initialTitle={note.title}
+        initialBody={note.content}
+      />
+    | Error(error) =>
+      <div className="h-full w-full flex items-center justify-center">
+        <div
+          className="h-full w-full flex flex-col items-center justify-center gap-4">
+          <Text size=XXLarge> "❌" </Text>
+          <Text> "There's an error while loading a single note" </Text>
+          <Text weight=Bold> error </Text>
+        </div>
+      </div>
+    };
+  };
+};