From 99d235f5e7aa29e5b5d91af1162454a007f5d036 Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Thu, 26 May 2022 18:05:07 +0300
Subject: [PATCH] create add field form

---
 src/pages/digitalId/ProfileId.jsx       | 80 ++++++++++++++++++-------
 src/partials/digitalId/ProfileTable.jsx |  2 +-
 2 files changed, 58 insertions(+), 24 deletions(-)

diff --git a/src/pages/digitalId/ProfileId.jsx b/src/pages/digitalId/ProfileId.jsx
index d74c2a7..731792e 100644
--- a/src/pages/digitalId/ProfileId.jsx
+++ b/src/pages/digitalId/ProfileId.jsx
@@ -6,6 +6,7 @@ import ProfileTable from '../../partials/digitalId/ProfileTable';
 
 function Profile () {
   const [sidebarOpen, setSidebarOpen] = useState(false);
+  const [toggle, setToggle] = useState(true);
 
   return (
     <div className="flex h-screen overflow-hidden">
@@ -17,32 +18,65 @@ function Profile () {
         <Header sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
         <main>
           <div className="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto">
-            {/* Page header */}
-            <div>
-              {/* Title */}
+            <div className="mx-auto flex flex-col lg:flex-row lg:space-x-8">
+              {/* Page header */}
               <div>
-                <ul className="flex flex-wrap -m-1">
-                  <li className="m-1">
-                    <button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-transparent shadow-sm bg-indigo-500 text-white duration-150 ease-in-out">
-                      View All
-                    </button>
-                  </li>
-                  <li className="m-1">
-                    <button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">
-                      Validated
-                    </button>
-                  </li>
-                  <li className="m-1">
-                    <button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">
-                      Blockchained
-                    </button>
-                  </li>
-                </ul>
+                {/* Title */}
+                <div>
+                  <ul className="flex flex-wrap -m-1">
+                    <li className="m-1">
+                      <button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-transparent shadow-sm bg-indigo-500 text-white duration-150 ease-in-out">
+                        View All
+                      </button>
+                    </li>
+                    <li className="m-1">
+                      <button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">
+                        Validated
+                      </button>
+                    </li>
+                    <li className="m-1">
+                      <button className="inline-flex items-center justify-center text-sm font-medium leading-5 rounded-full px-3 py-1 border border-slate-200 hover:border-slate-300 shadow-sm bg-white text-slate-500 duration-150 ease-in-out">
+                        Blockchained
+                      </button>
+                    </li>
+                  </ul>
+                </div>
+                {/* Table */}
+                <ProfileTable/>
+              </div>
+              {/* Sidebar */}
+              <div>
+                <div className="bg-white p-5 shadow-lg rounded-sm border border-slate-200 lg:w-72 xl:w-80">
+                  <div className="flex flex-col gap-y-3">
+                    <div>
+                      <label className="block text-sm font-medium mb-1" htmlFor="mandatory">Property <span className="text-rose-500">*</span></label>
+                      <input id="property" className="form-input w-full" type="text" required />
+                    </div>
+                    <div>
+                      <label className="block text-sm font-medium mb-1" htmlFor="mandatory">Value <span className="text-rose-500">*</span></label>
+                      <input id="value" className="form-input w-full" type="text" required />
+                    </div>
+                    <div>
+                      <label className="block text-sm font-medium mb-1" htmlFor="mandatory">Seed <span className="text-rose-500">*</span></label>
+                      <input id="seed" className="form-input w-full" type="text" required />
+                    </div>
+                  </div>
+                  <div className="flex flex-row justify-between my-5 items-center">
+                    <span className="block text-sm font-medium">Store data on blockchain</span>
+                    {/* Start */}
+                    <div className="flex items-center">
+                      <div className="form-switch">
+                        <input type="checkbox" id="switch-1" className="sr-only" checked={toggle} onChange={() => setToggle(!toggle)} />
+                          <label className="bg-slate-400" htmlFor="switch-1">
+                          <span className="bg-white shadow-sm" aria-hidden="true"></span>
+                        </label>
+                      </div>
+                    </div>
+                  </div>
+                  {/* End */}
+                </div>
               </div>
             </div>
-            {/* Page content */}
-             {/* Table */}
-             <ProfileTable/>
           </div>
         </main>
       </div>
diff --git a/src/partials/digitalId/ProfileTable.jsx b/src/partials/digitalId/ProfileTable.jsx
index f0f6b5f..095d624 100644
--- a/src/partials/digitalId/ProfileTable.jsx
+++ b/src/partials/digitalId/ProfileTable.jsx
@@ -147,7 +147,7 @@ function ProfileTable() {
       <h2 className="grow text-base font-semibold text-slate-800 truncate mb-2.5 mt-8">General 🖋️</h2>
       <div className="overflow-x-auto w-[828px]">
         <table className="w-[828px] table-auto w-full">
-          <tbody className="text-sm divide-slate-200 divide-y ">
+          <tbody className="divide-slate-200 divide-y">
             {userData.filter(data => data.category === 'General')
               .map(data => {
                 return (