#6 Style notes sidebar

package.json

@@ -10,13 +10,15 @@
     "@types/react-dom": "^18.0.6",
     "@types/react-draft-wysiwyg": "^1.13.4",
     "classnames": "^2.3.1",
+    "crypto": "^1.0.1",
     "cx": "^22.8.1",
     "gh-pages": "^4.0.0",
     "phosphor-react": "^1.4.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
     "typescript": "^4.7.4",
+    "uuid": "^8.3.2",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/components/sidebar/Note.tsx

@@ -0,0 +1,20 @@
+export interface NoteProps {
+  id: string;
+  title: string;
+  content?: string;
+  author: string;
+  timestamp: Date;
+  referenceTo?: string;
+}
+
+export const Note: React.FC<NoteProps> = (note: NoteProps) => {
+  return (
+    <div className="font-normal">
+      <div>{note.title}</div>
+      <div>{note.content}</div>
+      <div>{note.author}</div>
+      <div>{note.timestamp.getDate()}</div>
+      <div>{note.referenceTo}</div>
+    </div>
+  );
+};

src/components/sidebar/SidebarNotes.tsx

@@ -1,11 +1,33 @@
 import { Plus } from "phosphor-react";
 import { Button } from "../Button";
+import { Note, NoteProps } from "./Note";
+
+//TODO: remove this, this is for testing
+const notes: NoteProps[] = [
+  {
+    id: "1",
+    title: "Test Titel mit Bezug",
+    content:
+      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur dolorum earum dolores omnis odit, voluptas ratione? Praesentium reprehenderit perspiciatis repudiandae officia veniam qui facere at deserunt, harum ab pariatur beatae?",
+    author: "Max Muster",
+    timestamp: new Date(),
+    referenceTo: "12345",
+  },
+  {
+    id: "2",
+    title: "Test Titel ohne Bezug",
+    content:
+      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur dolorum earum dolores omnis odit, voluptas ratione? Praesentium reprehenderit perspiciatis repudiandae officia veniam qui facere at deserunt, harum ab pariatur beatae?",
+    author: "Max Muster",
+    timestamp: new Date(),
+  },
+];
 
 export const SidebarNotes = () => {
   return (
-    <div className="p-5">
+    <div className="flex flex-col gap-7 p-5">
       <div className="flex justify-between items-center">
-        <div className="text-base font-bold text-darkGrey">Notizen</div>
+        <div className="text-base font-bold text-darkGrey text-lg">Notizen</div>
         <Button
           key="createNote"
           bgColor="bg-darkGrey"
@@ -16,8 +38,30 @@ export const SidebarNotes = () => {
           icon={<Plus size={18} />}
         ></Button>
       </div>
-      <div className="mt-7 text-darkGrey opacity-40 text-center text-sm">
-        Notizen, die Sie zu Beiträgen verfassen, erscheinen in dieser Ansicht.
+      {notes.length <= 0 && (
+        <div className="mt-7 text-darkGrey opacity-40 text-center text-sm">
+          Notizen, die Sie zu Beiträgen verfassen, erscheinen in dieser Ansicht.
+        </div>
+      )}
+      <div className="text-mediumGrey font-bold text-sm">
+        OHNE BEZUG AUF BEITRAG
+        {notes
+          .filter((note) => {
+            return !note.referenceTo;
+          })
+          .map((note) => (
+            <Note {...note}></Note>
+          ))}
+      </div>
+      <div className="text-mediumGrey font-bold text-sm">
+        MIT BEZUG AUF BEITRAG
+        {notes
+          .filter((note) => {
+            return note.referenceTo;
+          })
+          .map((note) => (
+            <Note {...note}></Note>
+          ))}
       </div>
     </div>
   );