first deleting_elements commit

src/css/tailwind.config.js

@@ -20,10 +20,12 @@ module.exports = {
         inter: ['Inter', 'sans-serif'],
       },
       fontSize: {
+        xxs: ['0.625rem', { lineHeight: '0.75' }],
         xs: ['0.75rem', { lineHeight: '1.5' }],
         sm: ['0.875rem', { lineHeight: '1.5715' }],
         base: ['1rem', { lineHeight: '1.5', letterSpacing: '-0.01em' }],
         lg: ['1.125rem', { lineHeight: '1.5', letterSpacing: '-0.01em' }],
+        validateLg: ['1.125rem', { lineHeight: '1.875', letterSpacing: '-0.014em' }],
         xl: ['1.25rem', { lineHeight: '1.5', letterSpacing: '-0.01em' }],
         '2xl': ['1.5rem', { lineHeight: '1.33', letterSpacing: '-0.01em' }],
         '3xl': ['1.88rem', { lineHeight: '1.33', letterSpacing: '-0.01em' }],

src/images/GenerateOnboardingSvg/GenerateSvg.js

@@ -1,7 +1,5 @@
 function createBlob(options) {
 
-
-
     let points = [];
     let slice = (Math.PI * 2) / options.numPoints;
     let startAngle = 0;
@@ -16,7 +14,6 @@ function createBlob(options) {
         points.push(point);
     }
 
-
     let size = points.length;
     let path = "M" + points[0].x + " " + points[0].y + " C";
 
@@ -38,8 +35,6 @@ function createBlob(options) {
     return path + "z";
 }
 
-
-
 export var generateSvgAvatar = (function () {
     return function (seed, raw) {
         let pubKey = localStorage.getItem('svgKey') || Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16);
@@ -70,7 +65,6 @@ export var generateSvgAvatar = (function () {
 
         }
 
-
         let ph = "";
         let off = 4 + Number("0x"+pubKey.substring(0,1));
         let rotate = 0;
@@ -79,9 +73,6 @@ export var generateSvgAvatar = (function () {
             rotate = rotate + 360/off;
         }
 
-
-
-
         var svg = [
             '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="512" height="512" preserveAspectRatio="xMidYMid slice" viewBox="0 0 512 512">',
             '<defs>',
@@ -98,7 +89,6 @@ export var generateSvgAvatar = (function () {
             '</g>',
             '</svg>',
         ].join('');
-        // document.getElementById("myImg").src = raw ? svg : 'data:image/svg+xml;base64,' + btoa(svg);
         return raw ? svg : 'data:image/svg+xml;base64,' + btoa(svg);
     };
 

src/images/profile-icon.svg

@@ -0,0 +1,10 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<circle cx="18" cy="18" r="18" fill="#E1E1F7"/>
+<rect x="6" y="6" width="24" height="24" fill="url(#pattern0)"/>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_21_1525" transform="scale(0.0125)"/>
+</pattern>
+<image id="image0_21_1525" width="80" height="80" xlink:href="data:image/png;base64,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"/>
+</defs>
+</svg>

src/pages/Onboarding3.jsx

@@ -3,7 +3,6 @@ import { Link } from 'react-router-dom';
 import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
 import Logo from "../images/logo.png";
 
-
 function Onboarding3() {
   const arrayBadges = ['judge', 'jelly', 'wasp', 'true', 'clog', 'forward', 'talent', 'ozone', 'belive', 'fresh', 'bulk', 'hobby']
   return (
@@ -77,7 +76,7 @@ function Onboarding3() {
                     <button className="btn pr-11 pl-7 border-slate-200 hover:border-slate-300 text-rose-500">
                       <svg className="mb-0.5" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                         <path d="M14.5744 5.66943L13.1504 7.09343C13.4284 7.44043 13.6564 7.75743 13.8194 8.00043C13.0594 9.13043 10.9694 11.8204 8.25836 11.9854L6.44336 13.8004C6.93936 13.9244 7.45736 14.0004 8.00036 14.0004C12.7074 14.0004 15.7444 8.71643 15.8714 8.49243C16.0424 8.18843 16.0434 7.81643 15.8724 7.51243C15.8254 7.42743 15.3724 6.63143 14.5744 5.66943Z" fill="#F43F5E"/>
-                        <path fill-rule="evenodd" clip-rule="evenodd" d="M1.00038 16.0002C0.744375 16.0002 0.488375 15.9022 0.293375 15.7072C-0.0976249 15.3162 -0.0976249 14.6842 0.292375 14.2942L2.82138 11.7653C1.17238 10.2913 0.198375 8.61425 0.128375 8.48925C-0.0416249 8.18625 -0.0426249 7.81725 0.126375 7.51425C0.251375 7.28925 3.24537 2.00025 8.00037 2.00025C9.33138 2.00025 10.5154 2.43125 11.5484 3.03825L14.2934 0.29325C14.6844 -0.09775 15.3164 -0.09775 15.7074 0.29325C16.0984 0.68425 16.0984 1.31625 15.7074 1.70725L1.70738 15.7072C1.51238 15.9022 1.25638 16.0002 1.00038 16.0002ZM8.00037 4.00025C5.14637 4.00025 2.95837 6.83525 2.18138 7.99925C2.55938 8.56225 3.28538 9.51025 4.24038 10.3463L6.07438 8.51225C6.02938 8.34825 6.00037 8.17825 6.00037 8.00025C6.00037 6.89525 6.89537 6.00025 8.00037 6.00025C8.17838 6.00025 8.34838 6.02925 8.51237 6.07425L10.0784 4.50825C9.43738 4.20125 8.74237 4.00025 8.00037 4.00025Z" fill="#F43F5E"/>
+                        <path fillRule="evenodd" clipRule="evenodd" d="M1.00038 16.0002C0.744375 16.0002 0.488375 15.9022 0.293375 15.7072C-0.0976249 15.3162 -0.0976249 14.6842 0.292375 14.2942L2.82138 11.7653C1.17238 10.2913 0.198375 8.61425 0.128375 8.48925C-0.0416249 8.18625 -0.0426249 7.81725 0.126375 7.51425C0.251375 7.28925 3.24537 2.00025 8.00037 2.00025C9.33138 2.00025 10.5154 2.43125 11.5484 3.03825L14.2934 0.29325C14.6844 -0.09775 15.3164 -0.09775 15.7074 0.29325C16.0984 0.68425 16.0984 1.31625 15.7074 1.70725L1.70738 15.7072C1.51238 15.9022 1.25638 16.0002 1.00038 16.0002ZM8.00037 4.00025C5.14637 4.00025 2.95837 6.83525 2.18138 7.99925C2.55938 8.56225 3.28538 9.51025 4.24038 10.3463L6.07438 8.51225C6.02938 8.34825 6.00037 8.17825 6.00037 8.00025C6.00037 6.89525 6.89537 6.00025 8.00037 6.00025C8.17838 6.00025 8.34838 6.02925 8.51237 6.07425L10.0784 4.50825C9.43738 4.20125 8.74237 4.00025 8.00037 4.00025Z" fill="#F43F5E"/>
                       </svg>
                       <span className="ml-2">Generate</span>
                     </button>

src/pages/Onboarding4.jsx

@@ -3,8 +3,6 @@ import { Link } from 'react-router-dom';
 import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg";
 import Logo from "../images/logo.png";
 
-
-
 function Onboarding4() {
   return (
     <main className="bg-white">

src/pages/digitalId/ProfileId.jsx

@@ -2,31 +2,57 @@ import React, { useState } from 'react';
 
 import Sidebar from '../../partials/Sidebar';
 import Header from '../../partials/Header';
+import ProfileTableItem from '../../partials/digitalId/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 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 */}
       <Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
-
       {/* Content area */}
       <div className="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden">
         {/*  Site header */}
         <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 className="mb-8">
               {/* Title */}
               <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Profile ✨</h1>
             </div>
+             {/* Table */}
+             <table className="w-[828px]">
+                <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>
     </div>
   )

src/pages/digitalId/Validate.jsx

@@ -62,62 +62,62 @@ function Validate () {
   ];
 
   return (
-    <div className="flex h-screen overflow-hidden">
+      <div className="flex h-screen overflow-hidden">
-      {/* Sidebar */}
+        {/* Sidebar */}
-      <Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
+        <Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
 
-      {/* Content area */}
+        {/* Content area */}
-      <div className="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden">
+        <div className="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden">
-        {/*  Site header */}
+          {/*  Site header */}
-        <Header sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
+          <Header sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
 
-        <main>
+          <main>
-          <div className="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto">
+            <div className="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-9xl mx-auto">
-            <div className="w-fit">
+              <div className="w-fit">
-            {/* Page header */}
+                {/* Page header */}
-              <div className="pb-2.5">
+                <div className="pb-2.5">
-                {/* Title */}
+                  {/* Title */}
-                <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">0x28394710234192304719234</h1>
+                  <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">0x28394710234192304719234</h1>
+                </div>
+                <Link className="font-normal text-sm text-indigo-500 hover:text-indigo-600" to="/digitalId/validate">Explore -&gt;</Link>
+                <div className="mb-5 mt-5">
+                  <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">
+                        Correct
+                      </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">
+                        Incorect
+                      </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">
+                        Missed
+                      </button>
+                    </li>
+                  </ul>
+                </div>
+                <ValidateTable setValidatePanelOpen={setValidatePanelOpen}/>
+                <div className="pb-8 border-b border-zinc-200 mt-12">
+                  <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Digiatl ID validation log ✨</h1>
+                </div>
+                {validateItems.map(item => {
+                  return <ValidateRoadMap season={item} key={item.id}/>
+                })}
               </div>
-              <Link className="font-normal text-sm text-indigo-500 hover:text-indigo-600" to="/digitalId/validate">Explore -&gt;</Link>
-              <div className="mb-5 mt-5">
-                <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">
-                      Correct
-                    </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">
-                      Incorect
-                    </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">
-                      Missed
-                    </button>
-                  </li>
-                </ul>
-              </div>
-              <ValidateTable setValidatePanelOpen={setValidatePanelOpen}/>
-              <div className="pb-8 border-b border-zinc-200 mt-12">
-                <h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Digiatl ID validation log ✨</h1>
-              </div>
-              {validateItems.map(item => {
-                return <ValidateRoadMap season={item} key={item.id}/>
-              })}
             </div>
-          </div>
+            <ValidatePanel validatePanelOpen={validatePanelOpen} setValidatePanelOpen={setValidatePanelOpen}/>
-          <ValidatePanel validatePanelOpen={validatePanelOpen} setValidatePanelOpen={setValidatePanelOpen}/>
+          </main>
-        </main>
 
+        </div>
       </div>
-    </div>
   )
 }
 

src/pages/digitalId/Verify.jsx

@@ -10,15 +10,12 @@ function Verify () {
     <div className="flex h-screen overflow-hidden">
       {/* Sidebar */}
       <Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
-
       {/* Content area */}
       <div className="relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden">
         {/*  Site header */}
         <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 className="mb-8">
               {/* Title */}
@@ -26,7 +23,6 @@ function Verify () {
             </div>
           </div>
         </main>
-
       </div>
     </div>
   )

src/partials/digitalId/ProfileTableItem.jsx

@@ -0,0 +1,154 @@
+import React, { useState } from 'react';
+
+function ProfileTableItem(props) {
+  const [descriptionOpen, setDescriptionOpen] = useState(false);
+
+  return (
+    <>
+      <tr className="bg-[#eaf0f6]">
+        <td className="pl-4 pr-4 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="py-3 whitespace-nowrap">
+          <div className="flex">
+            <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="py-3 whitespace-nowrap w-px">
+          <div className="w-fit text-xs inline-flex font-medium px-2.5 py-1">
+            {(props.status === 'Progress') ? (
+                <div className="bg-amber-100 text-amber-600 rounded-full text-center px-2.5 py-1">
+                  {props.status}
+                </div>) : 
+              (props.status === 'Stored') ? (
+                <div className="bg-slate-700 text-slate-100 rounded-full text-center px-2.5 py-1">
+                  {props.status}
+                </div>) :
+              (props.status === 'Completed') ? (
+                <div className="bg-emerald-100 text-emerald-600 rounded-full text-center px-2.5 py-1">
+                  {props.status}
+                </div>) : (
+                <div className="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">
+              {(props.avatars) ? (
+                props.avatars.map((avatar, index) => (
+                  <img className="rounded-full border-2 border-slate-100 box-content" key={index} src={avatar} width="32" height="32" alt="Avatar" />
+                ))
+              ): null}
+              <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-1 py-3 whitespace-nowrap w-px">
+          {/* 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="py-3 whitespace-nowrap w-px pr-1.5">
+            <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">Show more</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-[#eaf0f6]` }>
+        <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] bg-white" type="text" placeholder="2342423423423234223" />
+            </div>
+            <div>
+              <span className="block text-sm font-medium mb-1">Transaction</span>
+              <a href="" className="w-[396px] text-slate-400 font-normal text-sm underline">0x12831823791203192418234841238468</a>
+            </div>
+          </div>
+          {/* Progress validation bar */}
+          <div className="pt-[18px] pb-8">
+            <div className="h-full max-w-md w-full flex flex-row">
+              <div className="w-32 shrink-0">
+                <h2 className="text-xl leading-snug font-bold text-slate-800 xl:leading-7 mb-4 xl:mb-0">Today</h2>
+              </div>
+              <div>
+                <ul className="-my-2">
+                  {/* List item */}
+                  {props.transactions.map((data, index) => (
+                    <li className="relative py-2" key={index}>
+                      <div className="flex items-center mb-2.5">
+                        {(props.transactions[index+1]) ? (
+                          <div className="absolute left-0 h-full w-0.5 bg-slate-200 self-start ml-2.5 -translate-x-1/2 translate-y-3" aria-hidden="true"></div>
+                        ) : null}
+                        <div className="absolute left-0 rounded-full bg-indigo-500" aria-hidden="true">
+                          <svg className="w-5 h-5 fill-current text-white" viewBox="0 0 20 20">
+                            <path d="M14.4 8.4L13 7l-4 4-2-2-1.4 1.4L9 13.8z" />
+                          </svg>
+                        </div>
+                        <h3 className="pl-9 whitespace-nowrap">
+                          <span className="text-validateLg font-bold text-slate-800">Validate by </span>
+                          <a href="" className="font-bold text-validateLg underline text-indigo-500">{data}</a>
+                        </h3>
+                      </div>
+                      <div className="pl-9">
+                        <a href="" className="w-[396px] text-slate-800 font-semibold text-base underline">{data}</a>
+                        <span className="block text-xxs font-normal mb-1">Transactions ID</span>
+                      </div>
+                      <div className="pl-9">
+                        <a href="" className="w-[396px] text-slate-800 font-semibold text-base underline">{data.slice(2, data.length)}</a>
+                        <span className="block text-xxs font-normal mb-1">Validated data</span>
+                      </div>
+                      <div className="pl-9 pt-[14px]">
+                        <a className="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#0">
+                          Explore -&gt;
+                        </a>
+                      </div>
+                    </li>     
+                  ))}
+                </ul>
+              </div>
+            </div>
+          </div>
+        </td>
+       </tr>
+   </>
+  );
+}
+
+export default ProfileTableItem;