update

src/components/ReactTable4/EditRow.js

@@ -2,7 +2,7 @@ import React from "react";
 
 import map from "./map.svg";
 
-const EditRow = ({ row, columns }) => {
+const EditRow = ({ row, columns, sentForms }) => {
   // console.log(columns);
   return (
     <section
@@ -352,8 +352,8 @@ rder p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200
           <img className="my-2 mr-2 border rounded" src={map} />
         </div>
         {/* formInput */}
-        <div className="flex flex-col ">
-          <span className="text-md mb-2" style={{ color: "#65A9FF" }}>
+        <div className="flex flex-col flex-1">
+          <span className="text-sm mb-2" style={{ color: "#65A9FF" }}>
             توضیحات:
           </span>
           <form className="flex flex-col ">
@@ -378,16 +378,64 @@ rder p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200
           </form>
         </div>
         {/* previous */}
-        <div className="flex flex-col ">
-          <span className="text-md mb-2" style={{ color: "#65A9FF" }}>
+        <div className="flex flex-col relative">
+          <span className="text-sm mb-2" style={{ color: "#65A9FF" }}>
             توضیحات قبلی:
           </span>
+          <div
+            style={{
+              backgroundColor: "#F8FBFF",
+              borderColor: "#C8DEF9",
+            }}
+            className="rounded-md border cursor-pointer h-44 no-scrollbar overflow-y-scroll	"
+          >
+            {sentForms.slice(0, 4).map((sentForm, index) => (
+              <div>
+                {/* content */}
+                <div className="p-2">
+                  <p className="text-xs" style={{ color: "#00253A" }}>
+                    {sentForm.title}
+                  </p>
+                  <p
+                    className="text-xs text-left mt-2"
+                    style={{ color: "#6397B5" }}
+                  >
+                    <span>تاریخ:</span>
+                    {"  "}
+                    {sentForm.date}
+                  </p>
+                </div>
+                {/* border */}
+                {Number(index) !== sentForms.length - 1 && (
+                  <div
+                    className="border"
+                    style={{ borderColor: "#C8DEF9" }}
+                  ></div>
+                )}
+              </div>
+            ))}
+          </div>
+          <div
+            style={{ bottom: "33%", backgroundColor: "#C8DEF9" }}
+            className="absolute left-0.5 transform -translate-x-1/2 -translate-y-1/2 w-1 h-14 rounded"
+          ></div>
         </div>
       </div>
     </section>
   );
 };
 
-// {features.map((feature, index) => (
-
 export default EditRow;
+
+EditRow.defaultProps = {
+  sentForms: [
+    { title: "مشکلات فراقانونی با نظام صنفی", date: "1400/12/6" },
+    { title: "ایرادات قانونی در رابطه با تخلف ماده 36", date: "1398/12/6" },
+    { title: "مشکلات فراقانونی با نظام صنفی", date: "1400/12/6" },
+    { title: "ایرادات قانونی در رابطه با تخلف ماده 36", date: "1398/12/6" },
+    { title: "مشکلات فراقانونی با نظام صنفی", date: "1400/12/6" },
+    { title: "ایرادات قانونی در رابطه با تخلف ماده 36", date: "1398/12/6" },
+    { title: "مشکلات فراقانونی با نظام صنفی", date: "1400/12/6" },
+    { title: "ایرادات قانونی در رابطه با تخلف ماده 36", date: "1398/12/6" },
+  ],
+};