add popovers to fields

src/components/rect.jsx

@@ -6,7 +6,15 @@ import {
   IconPlus,
   IconMinus,
 } from "@douyinfe/semi-icons";
-import { Modal, Form, Checkbox, Row, Col } from "@douyinfe/semi-ui";
+import {
+  Modal,
+  Form,
+  Checkbox,
+  Row,
+  Col,
+  Popover,
+  Tag,
+} from "@douyinfe/semi-ui";
 
 const Rect = (props) => {
   const [node, setNode] = useState(Node.NONE);
@@ -63,7 +71,7 @@ const Rect = (props) => {
     {
       name: "name",
       type: "varchar(20)",
-      default: "n/a",
+      default: "",
       primary: false,
       unique: false,
       notNull: true,
@@ -136,8 +144,45 @@ const Rect = (props) => {
           </div>
           {fields.map((e, i) => {
             return (
-              <div
+              <Popover
                 key={i}
+                content={
+                  <div>
+                    <div className="flex justify-between items-center pb-2">
+                      <p className="me-4 font-bold">{e.name}</p>
+                      <p className="ms-4 text-slate-600">{e.type}</p>
+                    </div>
+                    <hr />
+                    {e.primary && (
+                      <Tag color="blue" className="me-2 my-2">
+                        Primary
+                      </Tag>
+                    )}
+                    {e.unique && (
+                      <Tag color="amber" className="me-2 my-2">
+                        Unique
+                      </Tag>
+                    )}
+                    {e.notNull && (
+                      <Tag color="purple" className="me-2 my-2">
+                        Not null
+                      </Tag>
+                    )}
+                    {e.increment && (
+                      <Tag color="green" className="me-2 my-2">
+                        Not null
+                      </Tag>
+                    )}
+                    <p className="text-slate-600">
+                      <strong>Default :</strong>{" "}
+                      {e.default === "" ? "Not set" : e.default}
+                    </p>
+                  </div>
+                }
+                position="right"
+                showArrow
+              >
+                <div
                   className={`${
                     i === fields.length - 1 ? "" : "border-b-2 border-gray-400"
                   } h-[36px] p-2 flex justify-between`}
@@ -174,6 +219,7 @@ const Rect = (props) => {
                     )}
                   </div>
                 </div>
+              </Popover>
             );
           })}
         </div>