admin/BlockchainUI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #6 from franze6/Profile-Page

Browse Source
This commit is contained in:
Kirill Andrusyak
2022-05-31 10:36:10 +03:00
committed by GitHub
parent c4c7b10b99 3f3a56c305
commit 0de76771ac
4 changed files with 486 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/css/tailwind.config.js
View File

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

378
src/pages/digitalId/ProfileId.jsx
View File

@@ -1,8 +1,8 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import Sidebar from '../../partials/Sidebar'; import Sidebar from '../../partials/Sidebar';
import Header from '../../partials/Header'; import Header from '../../partials/Header';
import ProfileTableItem from '../../partials/digitalId/ProfileTableItem'; import ProfileTable from '../../partials/digitalId/ProfileTable';
import Image from '../../images/transactions-image-04.svg';
import ProfileIcon from '../../images/profile-icon.svg'; import ProfileIcon from '../../images/profile-icon.svg';
import Avatar01 from '../../images/avatar-01.jpg'; import Avatar01 from '../../images/avatar-01.jpg';
import Avatar02 from '../../images/avatar-02.jpg'; import Avatar02 from '../../images/avatar-02.jpg';
@@ -10,16 +10,184 @@ import Avatar03 from '../../images/avatar-03.jpg';
function Profile () { function Profile () {
const [sidebarOpen, setSidebarOpen] = useState(false); const [sidebarOpen, setSidebarOpen] = useState(false);
const [buttonPanelOpen, setButtonPanelOpen] = useState(true);
const [removePanelOpen, setRemovePanelOpen] = useState(false);
const [changePanelOpen, setChangePanelOpen] = useState(false);
const [toggle, setToggle] = useState(true);
const [addPanelOpen, setAddPanelOpen] = useState(false);
const [selectedItems, setSelectedItems] = useState([]);
const data = { const handleSelectedItems = (selectedItems) => {
setSelectedItems([...selectedItems]);
if (selectedItems.length > 0) {
setButtonPanelOpen(false);
setAddPanelOpen(false);
setChangePanelOpen(true);
}
if (removePanelOpen === true) {
setChangePanelOpen(false);
}
if (selectedItems.length === 0) {
setRemovePanelOpen(false);
setButtonPanelOpen(true);
setChangePanelOpen(false);
}
};
const openAddPanel = () => {
setAddPanelOpen(true);
setButtonPanelOpen(false);
}
const cancelAddPanel = () => {
setAddPanelOpen(false);
setButtonPanelOpen(true);
}
const openRemovePanel = () => {
setRemovePanelOpen(true);
setChangePanelOpen(false);
}
const applyRemovePanel = () => {
setRemovePanelOpen(false);
setButtonPanelOpen(true);
}
const userData = [
{
id: '0', 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, image: ProfileIcon,
value: 'Passport', value: 'Passport',
property: 'Document type', property: 'Document type',
status: 'Progress', status: 'Progress',
transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'], transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
avatars: [Avatar01, Avatar02, Avatar03] 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 ( return (
<div className="flex h-screen overflow-hidden"> <div className="flex h-screen overflow-hidden">
@@ -30,27 +198,193 @@ function Profile () {
{/* 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="pl-8 pr-[42px] 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 */} {/* Page header */}
<div className="mb-8"> <div>
{/* Title */} <div>
<h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Profile ✨</h1> <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>
{/* Table */} {/* Table */}
<table className="w-[828px]"> <ProfileTable selectedItems={handleSelectedItems} userData={userData}/>
<tbody className="text-sm"> </div>
<ProfileTableItem {/* Left sidebar */}
key={data.id} <div>
id={data.id} {/* Button panel*/}
image={data.image} <div className={`${!buttonPanelOpen && "hidden"} ml-2.5`}>
value={data.value} <div className="bg-white px-5 py-[43px] shadow-lg rounded-sm border border-slate-200 lg:w-72 xl:w-80">
property={data.property} <button
status={data.status} className="btn w-full bg-indigo-500 hover:bg-indigo-600 text-white"
transactions={data.transactions} onClick={openAddPanel}
avatars={data.avatars} >
/> <svg className="w-4 h-4 fill-current shrink-0" viewBox="0 0 16 16">
</tbody> <path d="m2.457 8.516.969-.99 2.516 2.481 5.324-5.304.985.989-6.309 6.284z" />
</table> </svg>
<span className="ml-1">Add new field</span>
</button>
</div>
</div>
<div className="ml-2.5">
{/* Add panel */}
<div className={`${!addPanelOpen && 'hidden'} bg-white p-5 shadow-lg rounded-sm border border-slate-200 lg:w-72 xl:w-80 mb-11`}>
<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 pt-[16px] pb-[23px] items-center border-b border-slate-200">
<span className="block text-sm font-medium">Store data on blockchain</span>
<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>
{/* Buttons */}
<div className="flex flex-row justify-end gap-x-2 pt-[18px] pb-[14px] items-end">
<button
className="btn-sm bg-white border-slate-200 hover:bg-slate-50 text-slate-600"
onClick={cancelAddPanel}
>
Cansel
</button>
<button
className="btn-sm bg-indigo-500 hover:bg-indigo-600 text-white"
onClick={cancelAddPanel}
>
Send
</button>
</div>
</div>
{/* Remove panel */}
<div className={`${!removePanelOpen && 'hidden'} bg-white p-5 pb-[190px] shadow-lg rounded-sm border border-slate-200 lg:w-72 xl:w-80 mb-12`}>
<h2 className="grow text-base font-semibold text-slate-800 truncate mb-2.5">Summary</h2>
<div className="flex flex-col">
{userData.filter(({ id }) => selectedItems.includes(id)).map(item => (
<span key={item.id} className="text-sm font-normal text-slate-600 py-3 border-b border-slate-200">{item.property}</span>
))}
</div>
<div className="flex flex-row justify-between pt-[16px] pb-[23px] items-center">
<span className="block text-sm font-medium">On blockchain too</span>
<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>
<div className="flex flex-row justify-end gap-x-2 pt-[20px] pb-[16px] items-end">
<button
className="btn w-full bg-indigo-500 hover:bg-indigo-600 text-white px-[100px] justify-start"
onClick={applyRemovePanel}
>
<svg className="w-4 h-4 fill-current shrink-0" viewBox="0 0 16 16">
<path d="m2.457 8.516.969-.99 2.516 2.481 5.324-5.304.985.989-6.309 6.284z" />
</svg>
<span className="ml-2">Apply</span>
</button>
</div>
<div className="flex justify-center">
<span className="text-descriptionSize text-slate-500 font-normal italic text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do Terms.</span>
</div>
</div>
{/* Details */}
<div className={`${(removePanelOpen || addPanelOpen) || 'hidden'} drop-shadow-lg`}>
{/* Top */}
<div className="bg-white rounded-t-xl px-5 pb-4 text-center">
<div className="mb-3 text-center">
<img className="inline-flex w-12 h-12 rounded-full -mt-6" src={Image} width="48" height="48" alt="Transaction 04" />
</div>
<div className="mt-[31px] text-2xl font-semibold text-emerald-500 mb-1">0.012 IDN</div>
<div className="text-sm font-medium text-slate-800 mb-3">Total amount fee</div>
</div>
{/* Divider */}
<div className="flex justify-between items-center" aria-hidden="true">
<svg className="w-5 h-5 fill-white" xmlns="http://www.w3.org/2000/svg">
<path d="M0 20c5.523 0 10-4.477 10-10S5.523 0 0 0h20v20H0Z" />
</svg>
<div className="grow w-full h-5 bg-white flex flex-col justify-center">
<div className="h-px w-full border-t border-dashed border-slate-200" />
</div>
<svg className="w-5 h-5 fill-white rotate-180" xmlns="http://www.w3.org/2000/svg">
<path d="M0 20c5.523 0 10-4.477 10-10S5.523 0 0 0h20v20H0Z" />
</svg>
</div>
{/* Bottom */}
<div className="bg-white rounded-b-xl p-5 pt-[22px] pb-10 text-sm space-y-3">
<div className="flex justify-between space-x-1">
<span className="italic">Validator:</span>
<span className="font-medium text-slate-700 text-right">IT17 2207 1010 0504 0006 88</span>
</div>
<div className="flex justify-between space-x-1">
<span className="italic">Recipient:</span>
<span className="font-medium text-slate-700 text-right">IT17 2207 1010 0504 0006 88</span>
</div>
<div className="flex justify-between space-x-1">
<span className="italic">Transacion::</span>
<span className="font-medium text-slate-700 text-right">145 bytes</span>
</div>
</div>
</div>
</div>
{/* Change panel */}
<div className={`${!changePanelOpen && 'hidden'} ml-2.5`}>
<div className="flex flex-col bg-white px-5 pt-5 pb-6 shadow-lg rounded-sm border border-slate-200 lg:w-72 xl:w-80 gap-y-[8px]">
<button
className="btn w-full bg-indigo-500 hover:bg-indigo-600 text-white px-[100px] justify-start"
onClick={openRemovePanel}
>
<svg className="w-4 h-4 fill-current shrink-0" viewBox="0 0 16 16">
<path d="m2.457 8.516.969-.99 2.516 2.481 5.324-5.304.985.989-6.309 6.284z" />
</svg>
<span className="ml-2">Remove</span>
</button>
<button className="btn w-full border-slate-200 hover:border-slate-300 text-slate-600 px-[100px] justify-start">
<svg className="w-4 h-4 fill-rose-500 shrink-0" viewBox="0 0 16 16">
<path d="M14.682 2.318A4.485 4.485 0 0 0 11.5 1 4.377 4.377 0 0 0 8 2.707 4.383 4.383 0 0 0 4.5 1a4.5 4.5 0 0 0-3.182 7.682L8 15l6.682-6.318a4.5 4.5 0 0 0 0-6.364Zm-1.4 4.933L8 12.247l-5.285-5A2.5 2.5 0 0 1 4.5 3c1.437 0 2.312.681 3.5 2.625C9.187 3.681 10.062 3 11.5 3a2.5 2.5 0 0 1 1.785 4.251h-.003Z" />
</svg>
<span className="ml-2">Update</span>
</button>
<button className="btn w-full border-slate-200 hover:border-slate-300 text-slate-600 px-[100px] justify-start">
<svg className="w-4 h-4 fill-rose-500 shrink-0" viewBox="0 0 16 16">
<path d="M14.682 2.318A4.485 4.485 0 0 0 11.5 1 4.377 4.377 0 0 0 8 2.707 4.383 4.383 0 0 0 4.5 1a4.5 4.5 0 0 0-3.182 7.682L8 15l6.682-6.318a4.5 4.5 0 0 0 0-6.364Zm-1.4 4.933L8 12.247l-5.285-5A2.5 2.5 0 0 1 4.5 3c1.437 0 2.312.681 3.5 2.625C9.187 3.681 10.062 3 11.5 3a2.5 2.5 0 0 1 1.785 4.251h-.003Z" />
</svg>
<span className="ml-2">Share</span>
</button>
</div>
</div>
</div>
</div>
</div> </div>
</main> </main>
</div> </div>

108
src/partials/digitalId/ProfileTable.jsx Normal file
View File

@@ -0,0 +1,108 @@
import React, {useState, useEffect} from 'react';
import ProfileTableItem from './ProfileTableItem';
function ProfileTable({
selectedItems,
userData
}) {
const [isCheck, setIsCheck] = useState([]);
useEffect(() => {
selectedItems(isCheck);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isCheck]);
const handleClick = e => {
const { id, checked } = e.target;
setIsCheck([...isCheck, id]);
if (!checked) {
setIsCheck(isCheck.filter(item => item !== id));
}
};
return (
<>
{/* General */}
<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="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}
handleClick={handleClick}
isChecked={isCheck.includes(data.id)}
/>
)
})
}
</tbody>
</table>
</div>
{/* Nationality */}
<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}
handleClick={handleClick}
isChecked={isCheck.includes(data.id)}
/>
)
})
}
</tbody>
</table>
</div>
{/* Social */}
<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}
handleClick={handleClick}
isChecked={isCheck.includes(data.id)}
/>
)
})
}
</tbody>
</table>
</div>
</>
)
}
export default ProfileTable;

8
src/partials/digitalId/ProfileTableItem.jsx
View File

@@ -5,7 +5,7 @@ function ProfileTableItem(props) {
return ( return (
<> <>
<tr className="bg-[#eaf0f6]"> <tr className={`${props.status !== 'Progress' || 'bg-[#eaf0f6]'}`}>
<td className="pl-4 pr-4 py-3 whitespace-nowrap w-px"> <td className="pl-4 pr-4 py-3 whitespace-nowrap w-px">
<div className="flex items-center"> <div className="flex items-center">
<label className="inline-flex"> <label className="inline-flex">
@@ -89,7 +89,7 @@ function ProfileTableItem(props) {
</div> </div>
</td> </td>
</tr> </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"> <td colSpan="10" className="px-12 py-3.5">
<div className="flex items-center gap-x-5"> <div className="flex items-center gap-x-5">
<div> <div>
@@ -122,8 +122,8 @@ function ProfileTableItem(props) {
</svg> </svg>
</div> </div>
<h3 className="pl-9 whitespace-nowrap"> <h3 className="pl-9 whitespace-nowrap">
<span className="text-validateLg font-bold text-slate-800">Validate by </span> <span className="text-validateSize font-bold text-slate-800">Validate by </span>
<a href="" className="font-bold text-validateLg underline text-indigo-500">{data}</a> <a href="" className="font-bold text-validateSize underline text-indigo-500">{data}</a>
</h3> </h3>
</div> </div>
<div className="pl-9"> <div className="pl-9">