area shape

src/components/canvas.jsx

@@ -326,7 +326,7 @@ export default function Canvas(props) {
         isOver: !!monitor.isOver(),
       }),
     }),
-    [tables]
+    [tables, areas]
   );
 
   return (

src/components/shape.jsx

@@ -16,7 +16,7 @@ function Table() {
       ref={drag}
       className={`${
         isDragging ? "opacity-50" : ""
-      } cursor-move w-[136px] h-[72px] border border-gray-400 rounded-md text-xs border-collapse bg-gray-100`}
+      } cursor-move w-[126px] h-[72px] border border-gray-400 rounded-md text-xs border-collapse bg-gray-100`}
     >
       <div
         className={`h-[7px] w-full rounded-t`}
@@ -57,22 +57,43 @@ function Note() {
       ref={drag}
       className={`${
         isDragging ? "opacity-50" : ""
-      } cursor-move w-[82px] h-[82px]`}
+      } cursor-move w-[82px] h-[82px] relative`}
     >
-      <svg
+      <svg className="w-full h-full">
-        style={{
-          width: "100%",
-          height: "100%",
-        }}
-      >
         <path
           d="M20 1 L76 1 A4 4 0 0 1 80 4 L80 76 A4 4 0 0 1 76 80 L4 80 A4 4 0 0 1 1 76 L1 20 M1 20 L16 20 A4 4 0 0 0 20 16 L20 1Z"
-          fill="#fae989"
+          fill="#fcf7ac"
           stroke="#665b25"
           strokeLinejoin="round"
           strokeWidth="1"
         />
       </svg>
+      <div className="text-gray-700 absolute select-none text-xs top-[50%] left-[50%] translate-y-[-50%] translate-x-[-50%]">
+        Note
+      </div>
+    </div>
+  );
+}
+
+function Area() {
+  const [{ isDragging }, drag] = useDrag(() => ({
+    type: "CARD",
+    item: { type: ObjectType.AREA },
+    collect: (monitor) => ({
+      isDragging: !!monitor.isDragging(),
+    }),
+  }));
+
+  return (
+    <div ref={drag} className="cursor-move w-[92px] h-[82px] relative">
+      <div
+        className={`${isDragging ? "opacity-30" : "opacity-40"} 
+           w-full h-full rounded border-2 border-slate-900`}
+        style={{ backgroundColor: defaultTableTheme }}
+      />
+      <div className="text-gray-800 absolute top-[50%] left-[50%] translate-y-[-50%] translate-x-[-50%] select-none text-xs text-center">
+        Subject area
+      </div>
     </div>
   );
 }
@@ -84,6 +105,7 @@ export default function Shape() {
       <div className="py-2"></div>
       <Note />
       <div className="py-2"></div>
+      <Area />
     </div>
   );
 }