create add field form

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,6 +18,7 @@ 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">
+            <div className="mx-auto flex flex-col lg:flex-row lg:space-x-8">
               {/* Page header */}
               <div>
                 {/* Title */}
@@ -39,11 +41,43 @@ function Profile () {
                     </li>
                   </ul>
                 </div>
-            </div>
-            {/* Page content */}
                 {/* 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>
+          </div>
         </main>
       </div>
     </div>

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 (