Add note overview

src/components/note.jsx

@@ -1,23 +1,21 @@
-import React, { useContext, useState } from "react";
+import React, { useContext } from "react";
 import { NoteContext } from "../pages/editor";
 
 export default function Note(props) {
   const { setNotes } = useContext(NoteContext);
-  const [size, setSize] = useState({ w: 180, h: 88 });
+  const w = 180;
   const r = 3;
   const fold = 24;
 
   const handleChange = (e) => {
     const textarea = document.getElementById(`note_${props.data.id}`);
-    const newHeight = textarea.scrollHeight + 16 + 20 + 4;
-    setSize((prevSize) => ({ ...prevSize, h: newHeight }));
     textarea.style.height = "0";
     textarea.style.height = textarea.scrollHeight + "px";
-
+    const newHeight = textarea.scrollHeight + 16 + 20 + 4;
     setNotes((prev) =>
       prev.map((n) => {
         if (n.id === props.data.id) {
-          return { ...n, content: e.target.value };
+          return { ...n, content: e.target.value, height: newHeight };
         }
         return n;
       })
@@ -28,17 +26,17 @@ export default function Note(props) {
     <g>
       <path
         d={`M${props.data.x + fold} ${props.data.y} L${
-          props.data.x + size.w - r
-        } ${props.data.y} A${r} ${r} 0 0 1 ${props.data.x + size.w} ${
+          props.data.x + w - r
+        } ${props.data.y} A${r} ${r} 0 0 1 ${props.data.x + w} ${
           props.data.y + r
-        } L${props.data.x + size.w} ${
-          props.data.y + size.h - r
-        } A${r} ${r} 0 0 1 ${props.data.x + size.w - r} ${
-          props.data.y + size.h
-        } L${props.data.x + r} ${props.data.y + size.h} A${r} ${r} 0 0 1 ${
+        } L${props.data.x + w} ${
+          props.data.y + props.data.height - r
+        } A${r} ${r} 0 0 1 ${props.data.x + w - r} ${
+          props.data.y + props.data.height
+        } L${props.data.x + r} ${props.data.y + props.data.height} A${r} ${r} 0 0 1 ${
           props.data.x
-        } ${props.data.y + size.h - r} L${props.data.x} ${props.data.y + fold}`}
-        fill="#fcf7ac"
+        } ${props.data.y + props.data.height - r} L${props.data.x} ${props.data.y + fold}`}
+        fill={props.data.color}
         stroke="#665b25"
         strokeLinejoin="round"
         strokeWidth="0.6"
@@ -51,7 +49,7 @@ export default function Note(props) {
         } L${props.data.x + fold} ${props.data.y} L${props.data.x} ${
           props.data.y + fold
         } Z`}
-        fill="#fcf7ac"
+        fill={props.data.color}
         stroke="#665b25"
         strokeLinejoin="round"
         strokeWidth="0.6"
@@ -59,8 +57,8 @@ export default function Note(props) {
       <foreignObject
         x={props.data.x}
         y={props.data.y}
-        width={size.w}
-        height={size.h}
+        width={w}
+        height={props.data.height}
         onMouseDown={props.onMouseDown}
       >
         <div className="text-gray-900 select-none w-full h-full cursor-move px-3 py-2">
@@ -69,7 +67,8 @@ export default function Note(props) {
             id={`note_${props.data.id}`}
             value={props.data.content}
             onInput={handleChange}
-            className="mt-1 w-full resize-none outline-none overflow-y-hidden border-none select-none bg-[#fcf7ac]"
+            className="mt-1 w-full resize-none outline-none overflow-y-hidden border-none select-none"
+            style={{backgroundColor: props.data.color}}
           ></textarea>
         </div>
       </foreignObject>