add other forms

This commit is contained in:
Daria Golova
2022-05-27 17:36:06 +03:00
committed by DwCay
parent 3e5ef4f128
commit 709f668697
4 changed files with 257 additions and 76 deletions

View File

@@ -1,11 +1,28 @@
import React from 'react';
import React, {useState, useEffect} 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() {
function ProfileTable({
selectedItems
}) {
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));
}
};
const userData = [
{
@@ -160,6 +177,8 @@ function ProfileTable() {
status={data.status}
transactions={data.transactions}
avatars={data.avatars}
handleClick={handleClick}
isChecked={isCheck.includes(data.id)}
/>
)
})
@@ -184,6 +203,8 @@ function ProfileTable() {
status={data.status}
transactions={data.transactions}
avatars={data.avatars}
handleClick={handleClick}
isChecked={isCheck.includes(data.id)}
/>
)
})
@@ -208,6 +229,8 @@ function ProfileTable() {
status={data.status}
transactions={data.transactions}
avatars={data.avatars}
handleClick={handleClick}
isChecked={isCheck.includes(data.id)}
/>
)
})

View File

@@ -28,20 +28,20 @@ function ProfileTableItem(props) {
<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 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>