toolbar and grid

mapsy/src/components/Grid.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Rect } from 'react-konva';
+
+const Grid = ({ gridSize, canvasSize }) => {
+    const lines = [];
+    for (let i = 0; i <= canvasSize; i += gridSize) {
+        lines.push(
+            <Rect key={`v-${i}`} x={i} y={0} width={1} height={canvasSize} fill="lightgray" />,
+            <Rect key={`h-${i}`} x={0} y={i} width={canvasSize} height={1} fill="lightgray" /> 
+        );
+    }
+    return lines;
+};
+
+export default Grid;

mapsy/src/components/Toolbar.jsx

@@ -1 +1,12 @@
-import React from 'react';
+import React from 'react';
+
+const Toolbar = ({ setTool }) => {
+    return (
+        <div className="toolbar">
+            <button onClick={() => setTool('draw')}>Draw</button>
+            <button onClick={() => setTool('erase')}>Erase</button>
+        </div>
+    );
+};
+
+export default Toolbar;