Add notes

src/components/notes_overview.jsx

@@ -0,0 +1,65 @@
+import React, { useContext } from "react";
+import {
+  Empty,
+  Row,
+  Col,
+  Button,
+//   Input,
+//   Popover,
+//   Toast,
+} from "@douyinfe/semi-ui";
+import {
+  IllustrationNoContent,
+  IllustrationNoContentDark,
+} from "@douyinfe/semi-illustrations";
+import { IconPlus } from "@douyinfe/semi-icons";
+import { NoteContext } from "../pages/editor";
+
+export default function NotesOverview(props) {
+  const { notes, setNotes } = useContext(NoteContext);
+
+  return (
+    <div>
+      <Row gutter={6}>
+        <Col span={24}>
+          <Button
+            icon={<IconPlus />}
+            block
+            onClick={() => {
+              const newNote = {
+                id: notes.length,
+                x: 0,
+                y: 0,
+                title: `note_${notes.length}`,
+                content: ""
+              };
+              setNotes((prev) => [...prev, newNote]);
+            }}
+          >
+            Add note
+          </Button>
+        </Col>
+      </Row>
+      {notes.length <= 0 ? (
+        <div className="select-none mt-2">
+          <Empty
+            image={
+              <IllustrationNoContent style={{ width: 160, height: 160 }} />
+            }
+            darkModeImage={
+              <IllustrationNoContentDark style={{ width: 160, height: 160 }} />
+            }
+            title="No text notes"
+            description="Add notes cuz why not!"
+          />
+        </div>
+      ) : (
+        <div className="p-2">
+          {notes.map((n, i) => (
+            <div key={n.id}>{n.title}</div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}