From cdce22fdd66d437114abd2fcc21ff4d4629e3cc0 Mon Sep 17 00:00:00 2001
From: 1ilit <lilitmousheghyan@gmail.com>
Date: Tue, 19 Sep 2023 15:47:14 +0300
Subject: [PATCH] sum stuf

---
 src/App.js                   |  5 ++---
 src/components/draw_area.jsx | 31 +++++++++++++++++++++++++++++++
 src/components/rect.jsx      |  3 +--
 3 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/src/App.js b/src/App.js
index 66c857e..add60c0 100644
--- a/src/App.js
+++ b/src/App.js
@@ -7,9 +7,8 @@ function App() {
     <>
       <Router>
         <Routes>
-
-        <Route path="/" element={<LandingPage />} />
-        <Route path="/editor" element={<Editor name="Untitled" />} />
+          <Route path="/" element={<LandingPage />} />
+          <Route path="/editor" element={<Editor name="Untitled" />} />
         </Routes>
       </Router>
     </>
diff --git a/src/components/draw_area.jsx b/src/components/draw_area.jsx
index 31d5fa6..94a08e3 100644
--- a/src/components/draw_area.jsx
+++ b/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}
diff --git a/src/components/rect.jsx b/src/components/rect.jsx
index de77fa7..519e46f 100644
--- a/src/components/rect.jsx
+++ b/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()}>