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

fix validate prop

Browse Source
This commit is contained in:
Daria Golova
2022-05-26 12:29:12 +03:00
parent 60194da89b
commit 5f1e8c55ff
2 changed files with 46 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,6 +4,9 @@ import Sidebar from '../../partials/Sidebar';
import Header from '../../partials/Header'; import Header from '../../partials/Header';
import ProfileTableItem from '../../partials/digitalId/ProfileTableItem'; import ProfileTableItem from '../../partials/digitalId/ProfileTableItem';
import ProfileIcon from '../../images/profile-icon.svg'; 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 () { function Profile () {
const [sidebarOpen, setSidebarOpen] = useState(false); const [sidebarOpen, setSidebarOpen] = useState(false);
@@ -14,8 +17,8 @@ function Profile () {
value: 'Passport', value: 'Passport',
property: 'Document type', property: 'Document type',
status: 'Progress', status: 'Progress',
transactions: '0x7234ABC342342352345', transactions: ['0x7234ABC342342352345', '0x5745DEF342342352345'],
validatedData: '7234ABC342342352345' avatars: [Avatar01, Avatar02, Avatar03]
}; };
return ( return (
@@ -47,13 +50,12 @@ function Profile () {
property={data.property} property={data.property}
status={data.status} status={data.status}
transactions={data.transactions} transactions={data.transactions}
validatedData={data.validatedData} avatars={data.avatars}
/> />
</tbody> </tbody>
</table> </table>
</div> </div>
</main> </main>
</div> </div>
</div> </div>
) )

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

@@ -1,7 +1,4 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import Avatar01 from '../../images/avatar-01.jpg';
import Avatar02 from '../../images/avatar-02.jpg';
import Avatar03 from '../../images/avatar-03.jpg';
function ProfileTableItem(props) { function ProfileTableItem(props) {
const [descriptionOpen, setDescriptionOpen] = useState(false); const [descriptionOpen, setDescriptionOpen] = useState(false);
@@ -9,7 +6,7 @@ function ProfileTableItem(props) {
return ( return (
<> <>
<tr className="bg-[#eaf0f6]"> <tr className="bg-[#eaf0f6]">
<td className="pl-2 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">
<span className="sr-only">Select</span> <span className="sr-only">Select</span>
@@ -28,7 +25,7 @@ function ProfileTableItem(props) {
</div> </div>
</div> </div>
</td> </td>
<td className="px-2 py-3 whitespace-nowrap w-px"> <td className="py-3 whitespace-nowrap w-px">
<div className="w-fit text-xs inline-flex font-medium px-2.5 py-1"> <div className="w-fit text-xs inline-flex font-medium px-2.5 py-1">
{(props.status === 'Progress') ? ( {(props.status === 'Progress') ? (
<div className="bg-amber-100 text-amber-600 rounded-full text-center px-2.5 py-1"> <div className="bg-amber-100 text-amber-600 rounded-full text-center px-2.5 py-1">
@@ -51,9 +48,11 @@ function ProfileTableItem(props) {
<td className="px-2 py-3 whitespace-nowrap w-[340px] box-border"> <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 flex-wrap items-center -m-1.5 justify-center">
<div className="flex -space-x-3 -ml-0.5"> <div className="flex -space-x-3 -ml-0.5">
<img className="rounded-full border-2 border-slate-100 box-content" src={Avatar01} width="32" height="32" alt="Avatar" /> {(props.avatars) ? (
<img className="rounded-full border-2 border-slate-100 box-content" src={Avatar02} width="32" height="32" alt="Avatar" /> props.avatars.map((avatar, index) => (
<img className="rounded-full border-2 border-slate-100 box-content" src={Avatar03} width="32" height="32" alt="Avatar" /> <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"> <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> <span className="sr-only">Add avatar</span>
<svg className="w-4 h-4 fill-current" viewBox="0 0 16 16"> <svg className="w-4 h-4 fill-current" viewBox="0 0 16 16">
@@ -64,7 +63,7 @@ function ProfileTableItem(props) {
</div> </div>
</td> </td>
<td className="px-1 py-3 whitespace-nowrap w-px"> <td className="px-1 py-3 whitespace-nowrap w-px">
{/* Menu button */} {/* Button */}
<div className="flex items-center"> <div className="flex items-center">
<button className="text-slate-400 hover:text-slate-500 rounded-full"> <button className="text-slate-400 hover:text-slate-500 rounded-full">
<span className="sr-only">Link</span> <span className="sr-only">Link</span>
@@ -74,7 +73,7 @@ function ProfileTableItem(props) {
</button> </button>
</div> </div>
</td> </td>
<td className="py-3 whitespace-nowrap w-px"> <td className="py-3 whitespace-nowrap w-px pr-1.5">
<div className="flex items-center"> <div className="flex items-center">
<button <button
className={`text-slate-400 hover:text-slate-500 transform ${descriptionOpen && 'rotate-180'}`} className={`text-slate-400 hover:text-slate-500 transform ${descriptionOpen && 'rotate-180'}`}
@@ -93,9 +92,9 @@ function ProfileTableItem(props) {
<tr className={`${!descriptionOpen && 'hidden'} bg-[#eaf0f6]` }> <tr className={`${!descriptionOpen && 'hidden'} 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 className='isolate'> <div>
<label className="block text-sm font-medium mb-1" htmlFor="placeholder">Seed</label> <label className="block text-sm font-medium mb-1" htmlFor="placeholder">Seed</label>
<input id="placeholder" className="form-input w-[396px] bg-white isolate" type="text" placeholder="2342423423423234223" /> <input id="placeholder" className="form-input w-[396px] bg-white" type="text" placeholder="2342423423423234223" />
</div> </div>
<div> <div>
<span className="block text-sm font-medium mb-1">Transaction</span> <span className="block text-sm font-medium mb-1">Transaction</span>
@@ -111,60 +110,37 @@ function ProfileTableItem(props) {
<div> <div>
<ul className="-my-2"> <ul className="-my-2">
{/* List item */} {/* List item */}
<li className="relative py-2"> {props.transactions.map((data, index) => (
<div className="flex items-center mb-2.5"> <li className="relative py-2" key={index}>
<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> <div className="flex items-center mb-2.5">
<div className="absolute left-0 rounded-full bg-indigo-500" aria-hidden="true"> {(props.transactions[index+1]) ? (
<svg className="w-5 h-5 fill-current text-white" viewBox="0 0 20 20"> <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>
<path d="M14.4 8.4L13 7l-4 4-2-2-1.4 1.4L9 13.8z" /> ) : null}
</svg> <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>
<h3 className="pl-9 whitespace-nowrap"> <div className="pl-9">
<span className="text-validateLg font-bold text-slate-800">Validate by </span> <a href="" className="w-[396px] text-slate-800 font-semibold text-base underline">{data}</a>
<a href="" className="font-bold text-validateLg underline text-indigo-500">{props.transactions}</a> <span className="block text-xxs font-normal mb-1">Transactions ID</span>
</h3>
</div>
<div className="pl-9">
<a href="" className="w-[396px] text-slate-800 font-semibold text-base underline">{props.transactions}</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">{props.validatedData}</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>
{/* List item */}
<li className="relative py-2">
<div className="flex items-center mb-2.5">
<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> </div>
<h3 className="pl-9 whitespace-nowrap"> <div className="pl-9">
<span className="text-validateLg font-bold text-slate-800">Validate by </span> <a href="" className="w-[396px] text-slate-800 font-semibold text-base underline">{data.slice(2, data.length)}</a>
<a href="" className="font-bold text-validateLg underline text-indigo-500">{props.transactions}</a> <span className="block text-xxs font-normal mb-1">Validated data</span>
</h3> </div>
</div> <div className="pl-9 pt-[14px]">
<div className="pl-9"> <a className="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#0">
<a href="" className="w-[396px] text-slate-800 font-semibold text-base underline">{props.transactions}</a> Explore -&gt;
<span className="block text-xxs font-normal mb-1">Transactions ID</span> </a>
</div> </div>
<div className="pl-9"> </li>
<a href="" className="w-[396px] text-slate-800 font-semibold text-base underline">{props.validatedData}</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> </ul>
</div> </div>
</div> </div>