From b0737e1a89803dd5d83e104232865d6a5cb699d4 Mon Sep 17 00:00:00 2001
From: 1ilit <lilitmousheghyan@gmail.com>
Date: Tue, 19 Sep 2023 15:48:33 +0300
Subject: [PATCH] Add table shape

---
 src/components/shape.jsx | 42 +++++++++++++++++++++++++++++++++++++---
 1 file changed, 39 insertions(+), 3 deletions(-)

diff --git a/src/components/shape.jsx b/src/components/shape.jsx
index dade724..52beca0 100644
--- a/src/components/shape.jsx
+++ b/src/components/shape.jsx
@@ -14,12 +14,48 @@ export default function Shape() {
       ref={drag}
       style={{
         opacity: isDragging ? 0.5 : 1,
-        fontSize: 25,
-        fontWeight: "bold",
         cursor: "move",
+        width: "150px",
+        height: "65px",
       }}
     >
-      rect
+      <svg
+        style={{
+          width: "100%",
+          height: "100%",
+        }}
+      >
+        <foreignObject
+          x={0}
+          y={0}
+          style={{
+            width: "100%",
+            height: "100%",
+          }}
+        >
+          <div className="border border-gray-600 w-full rounded h-full text-xs border-collapse">
+            <div className="px-3 py-0.5 border-b border-gray-600">Table</div>
+            <div className="px-1 py-0.5 border-b border-gray-600 flex items-center justify-between">
+              <div className="flex items-center">
+                <div className="w-[6px] h-[5px] bg-green-600 me-1 rounded-full" />
+                <div>id</div>
+              </div>
+              <div>
+                UUID
+              </div>
+            </div>
+            <div className="px-1 py-0.5 flex items-center justify-between">
+              <div className="flex items-center">
+                <div className="w-[6px] h-[5px] bg-green-600 me-1 rounded-full" />
+                <div>name</div>
+              </div>
+              <div>
+                VARCHAR
+              </div>
+            </div>
+          </div>
+        </foreignObject>
+      </svg>
     </div>
   );
 }