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

add input

Browse Source
This commit is contained in:
Daria Golova
2022-05-25 01:30:58 +03:00
parent 7ff6d08fc8
commit 1ab53990a1
2 changed files with 93 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -35,8 +35,8 @@ function Profile () {
<h1 className="text-2xl md:text-3xl text-slate-800 font-bold">Profile ✨</h1>
</div>
{/* Table */}
<table className="table-auto w-full">
<tbody className="text-sm divide-y divide-slate-200">
<table className="w-[828px]">
<tbody className="text-sm">
<ProfileTableItem
key={data.id}
id={data.id}

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

@@ -7,8 +7,9 @@ function ProfileTableItem(props) {
const [descriptionOpen, setDescriptionOpen] = useState(false);
return (
<tr>
<td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap w-px">
<>
<tr className="bg-[#F8FAFC] mix-blend-multiply">
<td className="px-2 py-3 whitespace-nowrap w-px">
<div className="flex items-center">
<label className="inline-flex">
<span className="sr-only">Select</span>
@@ -16,12 +17,12 @@ function ProfileTableItem(props) {
</label>
</div>
</td>
<td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
<td className="px-2 first:pl-5 last:pr-5 py-3 w-60 whitespace-nowrap">
<div className="flex items-center">
<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="flex flex-col">
<div className="font-semibold text-slate-800 text-base">{props.value}</div>
<div className="font-normal text-xxs">{props.property}</div>
</div>
@@ -29,24 +30,24 @@ function ProfileTableItem(props) {
</td>
<td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap w-px">
{(props.status === 'Progress') ? (
<div className="m-1.5 w-fit">
<div className="w-fit">
<div className="text-xs inline-flex font-medium bg-amber-100 text-amber-600 rounded-full text-center px-2.5 py-1">{props.status}</div>
</div>) :
(props.status === 'Stored') ? (
<div className="m-1.5 w-fit">
<div className="w-fit">
<div className="text-xs inline-flex font-medium bg-slate-700 text-slate-100 rounded-full text-center px-2.5 py-1">{props.status}</div>
</div>) :
(props.status === 'Completed') ? (
<div className="m-1.5 w-fit">
<div className="w-fit">
<div className="text-xs inline-flex font-medium bg-emerald-100 text-emerald-600 rounded-full text-center px-2.5 py-1">{props.status}</div>
</div>) : (
<div className="m-1.5 w-fit">
<div className="w-fit">
<div className="text-xs inline-flex font-medium bg-rose-100 text-rose-600 rounded-full text-center px-2.5 py-1">{props.status}</div>
</div>)
}
</td>
<td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
<div className="flex flex-wrap items-center -m-1.5">
<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">
<img className="rounded-full border-2 border-slate-100 box-content" src={Avatar01} width="32" height="32" alt="Avatar" />
<img className="rounded-full border-2 border-slate-100 box-content" src={Avatar02} width="32" height="32" alt="Avatar" />
@@ -71,12 +72,13 @@ function ProfileTableItem(props) {
</button>
</div>
</td>
<td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap w-px">
<td className="py-3 whitespace-nowrap w-px">
<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">Menu</span>
<svg className="w-8 h-8 fill-current" viewBox="0 0 32 32">
@@ -86,6 +88,21 @@ function ProfileTableItem(props) {
</div>
</td>
</tr>
<tr className={`${!descriptionOpen && 'hidden'} bg-[#F8FAFC] mix-blend-multiply` }>
<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]" type="text" placeholder="2342423423423234223" />
</div>
<div>
<span className="block text-sm font-medium mb-1">Transaction</span>
<a href="" className="w-[396px] underline">0x12831823791203192418234841238468</a>
</div>
</div>
</td>
</tr>
</>
);
}