Merge pull request #4 from franze6/Profile-table-item

Элемент таблицы Digital ID - Profile

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/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/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

@@ -7,27 +7,22 @@ function Validate () {
   const [sidebarOpen, setSidebarOpen] = useState(false);
 
   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">Validate ✨</h1>
-              </div>
+    <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">Validate ✨</h1>
             </div>
-          </main>
-
-        </div>
+          </div>
+        </main>
       </div>
   )
 }

src/pages/digitalId/ValidationLog.jsx

@@ -7,27 +7,22 @@ function ValidationLog () {
   const [sidebarOpen, setSidebarOpen] = useState(false);
 
   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">Validation log ✨</h1>
-              </div>
+    <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">Validation log ✨</h1>
             </div>
-          </main>
-
-        </div>
+          </div>
+        </main>
       </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;