sum stuf

src/App.js

@@ -7,7 +7,6 @@ function App() {
     <>
       <Router>
         <Routes>
-
           <Route path="/" element={<LandingPage />} />
           <Route path="/editor" element={<Editor name="Untitled" />} />
         </Routes>

src/components/draw_area.jsx

@@ -154,6 +154,37 @@ export default function Canvas(props) {
           onMouseUp={handleMouseUp}
           style={{ width: "100%", height: "100%", cursor: cursor }}
         >
+          <defs>
+            <pattern
+              id="smallGrid"
+              width="10"
+              height="10"
+              patternUnits="userSpaceOnUse"
+            >
+              <path
+                d="M 10 0 L 0 0 0 10"
+                fill="none"
+                stroke="lightblue"
+                strokeWidth="0.5"
+              />
+            </pattern>
+            <pattern
+              id="grid"
+              width="100"
+              height="100"
+              patternUnits="userSpaceOnUse"
+            >
+              <rect width="100" height="100" fill="url(#smallGrid)" />
+              <path
+                d="M 100 0 L 0 0 0 100"
+                fill="none"
+                stroke="lightblue"
+                strokeWidth="1"
+              />
+            </pattern>
+          </defs>
+
+          <rect width="100%" height="100%" fill="url(#grid)" />
           {props.rectangles.map((rectangle) => (
             <Rect
               key={rectangle.id}

src/components/rect.jsx

@@ -26,8 +26,7 @@ const Rect = (props) => {
         }}
       >
         <div
-          xmlns="http://www.w3.org/1999/xhtml"
-          className={`${isHovered ? "bg-red-500" : "bg-blue"} p-3`}
+          className={`${isHovered ? "ring-2 ring-blue-400 ring-inset" : ""} bg-gray-600 p-3 select-none rounded-md`}
         >
           <div className="text-white">{props.label}</div>
           <form onSubmit={(e) => e.preventDefault()}>