create table

src/pages/digitalId/ProfileId.jsx

@@ -2,25 +2,11 @@ import React, { useState } from 'react';
 
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
-import ProfileTableItem from '../../partials/digitalId/ProfileTableItem';
+import ProfileTable from '../../partials/digitalId/ProfileTable';
-import ProfileIcon from '../../images/profile-icon.svg';
-import Avatar01 from '../../images/avatar-01.jpg';
-import Avatar02 from '../../images/avatar-02.jpg';
-import Avatar03 from '../../images/avatar-03.jpg';
 
 function Profile () {
   const [sidebarOpen, setSidebarOpen] = useState(false);
 
-  const data = {
-      id: '0',
-      image: ProfileIcon,
-      value: 'Passport',
-      property: 'Document type',
-      status: 'Progress',
-      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
-      avatars: [Avatar01, Avatar02, Avatar03]
-    };
-
   return (
     <div className="flex h-screen overflow-hidden">
       {/* Sidebar */}
@@ -32,25 +18,31 @@ function Profile () {
         <main>
           <div className="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto">
             {/* Page header */}
-            <div className="mb-8">
+            <div>
               {/* Title */}
-              <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Profile ✨</h1>
+              <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>
+            </div>
+            {/* Page content */}
              {/* Table */}
-             <table className="w-[828px]">
+             <ProfileTable/>
-                <tbody className="text-sm">
-                  <ProfileTableItem
-                    key={data.id}
-                    id={data.id}
-                    image={data.image}
-                    value={data.value}
-                    property={data.property}
-                    status={data.status}
-                    transactions={data.transactions}
-                    avatars={data.avatars}
-                  />
-                </tbody>
-              </table>
           </div>
         </main>
       </div>

src/partials/digitalId/ProfileTable.jsx

@@ -0,0 +1,222 @@
+import React from 'react';
+import ProfileTableItem from './ProfileTableItem';
+import ProfileIcon from '../../images/profile-icon.svg';
+import Avatar01 from '../../images/avatar-01.jpg';
+import Avatar02 from '../../images/avatar-02.jpg';
+import Avatar03 from '../../images/avatar-03.jpg';
+
+function ProfileTable() {
+
+  const userData = [
+    {
+      id: '0',
+      category: 'General',
+      validated: true,
+      blockchained: true,
+      image: ProfileIcon,
+      value: 'Dominik',
+      property: 'First name',
+      status: 'Completed',
+      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
+      avatars: [Avatar01, Avatar02, Avatar03]
+    },
+    {
+      id: '1',
+      category: 'General',
+      validated: true,
+      blockchained: true,
+      image: ProfileIcon,
+      value: 'Lamakani',
+      property: 'Second name',
+      status: 'Progress',
+      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
+      avatars: null
+    },
+    {
+      id: '2',
+      category: 'General',
+      validated: true,
+      blockchained: true,
+      image: ProfileIcon,
+      value: '05.10.1983',
+      property: 'Birthdate',
+      status: 'Incorrect',
+      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
+      avatars: null
+    },
+    {
+      id: '3',
+      category: 'General',
+      validated: true,
+      blockchained: true,
+      image: ProfileIcon,
+      value: 'Male',
+      property: 'Gender',
+      status: 'Stored',
+      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
+      avatars: null
+    },
+    {
+      id: '4',
+      category: 'Nationality',
+      validated: true,
+      blockchained: true,
+      image: ProfileIcon,
+      value: 'United Kindom',
+      property: 'Residence',
+      status: 'Completed',
+      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
+      avatars: [Avatar01, Avatar02, Avatar03]
+    },
+    {
+      id: '5',
+      category: 'Nationality',
+      validated: true,
+      blockchained: true,
+      image: ProfileIcon,
+      value: 'Passport',
+      property: 'Document type',
+      status: 'Progress',
+      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
+      avatars: [Avatar01, Avatar02, Avatar03]
+    },
+    {
+      id: '6',
+      category: 'Nationality',
+      validated: true,
+      blockchained: true,
+      image: ProfileIcon,
+      value: 'A123B3143',
+      property: 'Document ID',
+      status: 'Incorrect',
+      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
+      avatars: null
+    },
+    {
+      id: '7',
+      category: 'Nationality',
+      validated: true,
+      blockchained: true,
+      image: ProfileIcon,
+      value: '05.10.2012',
+      property: 'Issue date',
+      status: 'Stored',
+      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
+      avatars: null
+    },
+    {
+      id: '8',
+      category: 'Nationality',
+      validated: true,
+      blockchained: true,
+      image: ProfileIcon,
+      value: '05.10.2032',
+      property: 'Expiry date',
+      status: 'Stored',
+      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
+      avatars: null
+    },
+    {
+      id: '9',
+      category: 'Social',
+      validated: true,
+      blockchained: true,
+      image: ProfileIcon,
+      value: '@lamakani',
+      property: 'Telegram',
+      status: 'Completed',
+      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
+      avatars: null
+    },
+    {
+      id: '10',
+      category: 'Social',
+      validated: true,
+      blockchained: true,
+      image: ProfileIcon,
+      value: '@lamakani',
+      property: 'Telegram',
+      status: 'Progress',
+      transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
+      avatars: [Avatar01, Avatar02, Avatar03]
+    },
+  ]
+
+  return (
+    <>
+      <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 ">
+            {userData.filter(data => data.category === 'General')
+              .map(data => {
+                return (
+                  <ProfileTableItem
+                    key={data.id}
+                    id={data.id}
+                    image={data.image}
+                    value={data.value}
+                    property={data.property}
+                    status={data.status}
+                    transactions={data.transactions}
+                    avatars={data.avatars}
+                  />
+                )
+              })
+            }
+          </tbody>
+        </table>
+      </div>
+
+      <h2 className="grow text-base font-semibold text-slate-800 truncate mb-2.5 mt-8">Nationality 🖋️</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 ">
+            {userData.filter(data => data.category === 'Nationality')
+              .map(data => {
+                return (
+                  <ProfileTableItem
+                    key={data.id}
+                    id={data.id}
+                    image={data.image}
+                    value={data.value}
+                    property={data.property}
+                    status={data.status}
+                    transactions={data.transactions}
+                    avatars={data.avatars}
+                  />
+                )
+              })
+            }
+          </tbody>
+        </table>
+      </div>
+
+      <h2 className="grow text-base font-semibold text-slate-800 truncate mb-2.5 mt-8">Social 🖋️</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 ">
+            {userData.filter(data => data.category === 'Social')
+              .map(data => {
+                return (
+                  <ProfileTableItem
+                    key={data.id}
+                    id={data.id}
+                    image={data.image}
+                    value={data.value}
+                    property={data.property}
+                    status={data.status}
+                    transactions={data.transactions}
+                    avatars={data.avatars}
+                  />
+                )
+              })
+            }
+          </tbody>
+        </table>
+      </div>
+    </>
+  )
+}
+
+export default ProfileTable;

src/partials/digitalId/ProfileTableItem.jsx

@@ -5,7 +5,7 @@ function ProfileTableItem(props) {
 
   return (
     <>
-      <tr className="bg-[#eaf0f6]">
+      <tr className={`${props.status !== 'Progress' || 'bg-[#eaf0f6]'}`}>
         <td className="pl-4 pr-4 py-3 whitespace-nowrap w-px">
           <div className="flex items-center">
             <label className="inline-flex">
@@ -89,7 +89,7 @@ function ProfileTableItem(props) {
             </div>
           </td>
       </tr>
-      <tr className={`${!descriptionOpen && 'hidden'} bg-[#eaf0f6]` }>
+      <tr className={`${!descriptionOpen && 'hidden'} ${props.status !== 'Progress' || 'bg-[#eaf0f6]'}` }>
         <td colSpan="10" className="px-12 py-3.5">
           <div className="flex items-center gap-x-5">
             <div>