create table
This commit is contained in:
Daria Golova
@@ -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 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';
|
||||
import ProfileTable from '../../partials/digitalId/ProfileTable';
|
||||
|
||||
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]">
|
||||
<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>
|
||||
<ProfileTable/>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
222
src/partials/digitalId/ProfileTable.jsx
Normal file
222
src/partials/digitalId/ProfileTable.jsx
Normal file
@@ -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;
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user