From 1ab53990a1c4b5e06fd6365dbf15a7394af2769c Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Wed, 25 May 2022 01:30:58 +0300
Subject: [PATCH] add input

---
 src/pages/digitalId/ProfileId.jsx           |   4 +-
 src/partials/digitalId/ProfileTableItem.jsx | 165 +++++++++++---------
 2 files changed, 93 insertions(+), 76 deletions(-)

diff --git a/src/pages/digitalId/ProfileId.jsx b/src/pages/digitalId/ProfileId.jsx
index 1155f1b..4100a3f 100644
--- a/src/pages/digitalId/ProfileId.jsx
+++ b/src/pages/digitalId/ProfileId.jsx
@@ -35,8 +35,8 @@ function Profile () {
               <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Profile ✨</h1>
             </div>
              {/* Table */}
-             <table className="table-auto w-full">
-                <tbody className="text-sm divide-y divide-slate-200">
+             <table className="w-[828px]">
+                <tbody className="text-sm">
                   <ProfileTableItem
                     key={data.id}
                     id={data.id}
diff --git a/src/partials/digitalId/ProfileTableItem.jsx b/src/partials/digitalId/ProfileTableItem.jsx
index c94749a..3f1ecb0 100644
--- a/src/partials/digitalId/ProfileTableItem.jsx
+++ b/src/partials/digitalId/ProfileTableItem.jsx
@@ -7,85 +7,102 @@ function ProfileTableItem(props) {
   const [descriptionOpen, setDescriptionOpen] = useState(false);
 
   return (
-    <tr>
-      <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap w-px">
-        <div className="flex items-center">
-          <label className="inline-flex">
-            <span className="sr-only">Select</span>
-            <input id={props.id} className="form-checkbox" type="checkbox" onChange={props.handleClick} checked={props.isChecked} />
-          </label>
-        </div>
-      </td>
-      <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
-        <div className="flex items-center">
-          <div className="w-9 h-9 shrink-0 mr-2 sm:mr-4">
-            <img className="rounded-full" src={props.image} width="40" height="40" alt={props.property} />
-          </div>
-          <div className="flex flex-col w-60"> 
-            <div className="font-semibold text-slate-800 text-base">{props.value}</div>
-            <div className="font-normal text-xxs">{props.property}</div>
-          </div>
-        </div>
-      </td>
-      <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap w-px">
-        {(props.status === 'Progress') ? (
-          <div className="m-1.5 w-fit">
-            <div className="text-xs inline-flex font-medium bg-amber-100 text-amber-600 rounded-full text-center px-2.5 py-1">{props.status}</div>
-          </div>) : 
-          (props.status === 'Stored') ? (
-          <div className="m-1.5 w-fit">
-            <div className="text-xs inline-flex font-medium bg-slate-700 text-slate-100 rounded-full text-center px-2.5 py-1">{props.status}</div>
-          </div>) :
-          (props.status === 'Completed') ? (
-          <div className="m-1.5 w-fit">
-            <div className="text-xs inline-flex font-medium bg-emerald-100 text-emerald-600 rounded-full text-center px-2.5 py-1">{props.status}</div>
-          </div>) : (
-          <div className="m-1.5 w-fit">
-            <div className="text-xs inline-flex font-medium bg-rose-100 text-rose-600 rounded-full text-center px-2.5 py-1">{props.status}</div>
-          </div>)
-        }
-      </td>
-      <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
-        <div className="flex flex-wrap items-center -m-1.5">
-          <div className="flex -space-x-3 -ml-0.5">
-            <img className="rounded-full border-2 border-slate-100 box-content" src={Avatar01} width="32" height="32" alt="Avatar" />
-            <img className="rounded-full border-2 border-slate-100 box-content" src={Avatar02} width="32" height="32" alt="Avatar" />
-            <img className="rounded-full border-2 border-slate-100 box-content" src={Avatar03} width="32" height="32" alt="Avatar" />
-            <button className="flex justify-center items-center w-9 h-9 rounded-full bg-white border-2 border-slate-200 hover:border-slate-300 text-indigo-500 shadow-sm transition duration-150">
-                <span className="sr-only">Add avatar</span>
-                <svg className="w-4 h-4 fill-current" viewBox="0 0 16 16">
-                  <path d="M15 7H9V1c0-.6-.4-1-1-1S7 .4 7 1v6H1c-.6 0-1 .4-1 1s.4 1 1 1h6v6c0 .6.4 1 1 1s1-.4 1-1V9h6c.6 0 1-.4 1-1s-.4-1-1-1z" />
-                </svg>
-            </button>
-          </div>
-        </div>
-      </td>
-      <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap w-px">
-        {/* Menu button */}
-        <div className="flex items-center">
-          <button className="text-slate-400 hover:text-slate-500 rounded-full">
-            <span className="sr-only">Link</span>
-            <svg className="w-4 h-4 fill-current shrink-0 text-slate-400" viewBox="0 0 16 16">
-              <path d="M11 0c1.3 0 2.6.5 3.5 1.5 1 .9 1.5 2.2 1.5 3.5 0 1.3-.5 2.6-1.4 3.5l-1.2 1.2c-.2.2-.5.3-.7.3-.2 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l1.1-1.2c.6-.5.9-1.3.9-2.1s-.3-1.6-.9-2.2C12 1.7 10 1.7 8.9 2.8L7.7 4c-.4.4-1 .4-1.4 0-.4-.4-.4-1 0-1.4l1.2-1.1C8.4.5 9.7 0 11 0ZM8.3 12c.4-.4 1-.5 1.4-.1.4.4.4 1 0 1.4l-1.2 1.2C7.6 15.5 6.3 16 5 16c-1.3 0-2.6-.5-3.5-1.5C.5 13.6 0 12.3 0 11c0-1.3.5-2.6 1.5-3.5l1.1-1.2c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4L2.9 8.9c-.6.5-.9 1.3-.9 2.1s.3 1.6.9 2.2c1.1 1.1 3.1 1.1 4.2 0L8.3 12Zm1.1-6.8c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4l-4.2 4.2c-.2.2-.5.3-.7.3-.2 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l4.2-4.2Z" />
-            </svg>
-          </button>
-        </div>
-      </td>
-      <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap w-px">
+    <>
+      <tr className="bg-[#F8FAFC] mix-blend-multiply">
+        <td className="px-2 py-3 whitespace-nowrap w-px">
           <div className="flex items-center">
-            <button
-              className={`text-slate-400 hover:text-slate-500 transform ${descriptionOpen && 'rotate-180'}`}
-              aria-expanded={descriptionOpen}
-              onClick={() => setDescriptionOpen(!descriptionOpen)}
-            >
-              <span className="sr-only">Menu</span>
-              <svg className="w-8 h-8 fill-current" viewBox="0 0 32 32">
-                <path d="M16 20l-5.4-5.4 1.4-1.4 4 4 4-4 1.4 1.4z" />
+            <label className="inline-flex">
+              <span className="sr-only">Select</span>
+              <input id={props.id} className="form-checkbox" type="checkbox" onChange={props.handleClick} checked={props.isChecked} />
+            </label>
+          </div>
+        </td>
+        <td className="px-2 first:pl-5 last:pr-5 py-3 w-60 whitespace-nowrap">
+          <div className="flex items-center">
+            <div className="w-9 h-9 shrink-0 mr-2 sm:mr-4">
+              <img className="rounded-full" src={props.image} width="40" height="40" alt={props.property} />
+            </div>
+            <div className="flex flex-col"> 
+              <div className="font-semibold text-slate-800 text-base">{props.value}</div>
+              <div className="font-normal text-xxs">{props.property}</div>
+            </div>
+          </div>
+        </td>
+        <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap w-px">
+          {(props.status === 'Progress') ? (
+            <div className="w-fit">
+              <div className="text-xs inline-flex font-medium bg-amber-100 text-amber-600 rounded-full text-center px-2.5 py-1">{props.status}</div>
+            </div>) : 
+            (props.status === 'Stored') ? (
+            <div className="w-fit">
+              <div className="text-xs inline-flex font-medium bg-slate-700 text-slate-100 rounded-full text-center px-2.5 py-1">{props.status}</div>
+            </div>) :
+            (props.status === 'Completed') ? (
+            <div className="w-fit">
+              <div className="text-xs inline-flex font-medium bg-emerald-100 text-emerald-600 rounded-full text-center px-2.5 py-1">{props.status}</div>
+            </div>) : (
+            <div className="w-fit">
+              <div className="text-xs inline-flex font-medium bg-rose-100 text-rose-600 rounded-full text-center px-2.5 py-1">{props.status}</div>
+            </div>)
+          }
+        </td>
+        <td className="px-2 py-3 whitespace-nowrap w-[340px] box-border">
+          <div className="flex flex-wrap items-center -m-1.5 justify-center">
+            <div className="flex -space-x-3 -ml-0.5">
+              <img className="rounded-full border-2 border-slate-100 box-content" src={Avatar01} width="32" height="32" alt="Avatar" />
+              <img className="rounded-full border-2 border-slate-100 box-content" src={Avatar02} width="32" height="32" alt="Avatar" />
+              <img className="rounded-full border-2 border-slate-100 box-content" src={Avatar03} width="32" height="32" alt="Avatar" />
+              <button className="flex justify-center items-center w-9 h-9 rounded-full bg-white border-2 border-slate-200 hover:border-slate-300 text-indigo-500 shadow-sm transition duration-150">
+                  <span className="sr-only">Add avatar</span>
+                  <svg className="w-4 h-4 fill-current" viewBox="0 0 16 16">
+                    <path d="M15 7H9V1c0-.6-.4-1-1-1S7 .4 7 1v6H1c-.6 0-1 .4-1 1s.4 1 1 1h6v6c0 .6.4 1 1 1s1-.4 1-1V9h6c.6 0 1-.4 1-1s-.4-1-1-1z" />
+                  </svg>
+              </button>
+            </div>
+          </div>
+        </td>
+        <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap w-px">
+          {/* Menu button */}
+          <div className="flex items-center">
+            <button className="text-slate-400 hover:text-slate-500 rounded-full">
+              <span className="sr-only">Link</span>
+              <svg className="w-4 h-4 fill-current shrink-0 text-slate-400" viewBox="0 0 16 16">
+                <path d="M11 0c1.3 0 2.6.5 3.5 1.5 1 .9 1.5 2.2 1.5 3.5 0 1.3-.5 2.6-1.4 3.5l-1.2 1.2c-.2.2-.5.3-.7.3-.2 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l1.1-1.2c.6-.5.9-1.3.9-2.1s-.3-1.6-.9-2.2C12 1.7 10 1.7 8.9 2.8L7.7 4c-.4.4-1 .4-1.4 0-.4-.4-.4-1 0-1.4l1.2-1.1C8.4.5 9.7 0 11 0ZM8.3 12c.4-.4 1-.5 1.4-.1.4.4.4 1 0 1.4l-1.2 1.2C7.6 15.5 6.3 16 5 16c-1.3 0-2.6-.5-3.5-1.5C.5 13.6 0 12.3 0 11c0-1.3.5-2.6 1.5-3.5l1.1-1.2c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4L2.9 8.9c-.6.5-.9 1.3-.9 2.1s.3 1.6.9 2.2c1.1 1.1 3.1 1.1 4.2 0L8.3 12Zm1.1-6.8c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4l-4.2 4.2c-.2.2-.5.3-.7.3-.2 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l4.2-4.2Z" />
               </svg>
             </button>
           </div>
         </td>
-    </tr>
+        <td className="py-3 whitespace-nowrap w-px">
+            <div className="flex items-center">
+              <button
+                className={`text-slate-400 hover:text-slate-500 transform ${descriptionOpen && 'rotate-180'}`}
+                aria-expanded={descriptionOpen}
+                onClick={() => setDescriptionOpen(!descriptionOpen)}
+                aria-controls={`description-${props.id}`}
+              >
+                <span className="sr-only">Menu</span>
+                <svg className="w-8 h-8 fill-current" viewBox="0 0 32 32">
+                  <path d="M16 20l-5.4-5.4 1.4-1.4 4 4 4-4 1.4 1.4z" />
+                </svg>
+              </button>
+            </div>
+          </td>
+      </tr>
+      <tr className={`${!descriptionOpen && 'hidden'} bg-[#F8FAFC] mix-blend-multiply` }>
+        <td colSpan="10" className="px-12 py-3.5">
+          <div className="flex items-center gap-x-5">
+            <div>
+              <label className="block text-sm font-medium mb-1" htmlFor="placeholder">Seed</label>
+              <input id="placeholder" className="form-input w-[396px]" type="text" placeholder="2342423423423234223" />
+            </div>
+            <div>
+              <span className="block text-sm font-medium mb-1">Transaction</span>
+              <a href="" className="w-[396px] underline">0x12831823791203192418234841238468</a>
+            </div>
+          </div>
+        </td>
+       </tr>
+   </>
   );
 }