63 lines
2.3 KiB
JavaScript
63 lines
2.3 KiB
JavaScript
import React from 'react';
|
|
|
|
function ValidateTableItem(props) {
|
|
|
|
const statusColor = (status) => {
|
|
switch (status) {
|
|
case 'Correct':
|
|
return 'bg-emerald-100 text-emerald-600';
|
|
case 'Incorrect':
|
|
return 'bg-rose-100 text-rose-500';
|
|
default:
|
|
return 'bg-slate-100 text-slate-500';
|
|
}
|
|
};
|
|
|
|
function openValidatePanel (event) {
|
|
event.stopPropagation()
|
|
props.setValidatePanelOpen(true)
|
|
}
|
|
|
|
return (
|
|
<tr className="hover:bg-[#eaf0f6] cursor-pointer" onClick={(e) => openValidatePanel(e)}>
|
|
<td className="px-2 first:pl-4 last:pr-5 py-3 whitespace-nowrap w-px">
|
|
<div className="flex items-center">
|
|
<label className="inline-flex">
|
|
<span className="sr-only">Select</span>
|
|
{props.check && <input id={props.id} className="form-checkbox" type="checkbox" onChange={props.handleClick} checked={props.isChecked} onClick={(e) => e.stopPropagation()} />}
|
|
</label>
|
|
</div>
|
|
</td>
|
|
<td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap md:w-1/2">
|
|
<div className="flex items-center">
|
|
<div>{props.filed}</div>
|
|
</div>
|
|
</td>
|
|
<td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
|
|
<div className="text-left font-medium text-slate-800">{props.data}</div>
|
|
</td>
|
|
<td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap w-px">
|
|
<div className={`text-left`}>{props.seed}</div>
|
|
</td>
|
|
<td className="px-2 first:pl-5 py-3 whitespace-nowrap">
|
|
<div className="text-left">
|
|
<div className={`text-xs inline-flex font-medium rounded-full text-center px-2.5 py-1 ${statusColor(props.status)}`}>{props.status}</div>
|
|
</div>
|
|
</td>
|
|
<td className="px-2 first:pl-5 last:pr-5 pt-3 pb-2 whitespace-nowrap w-px">
|
|
{/* Menu button */}
|
|
<button className="text-slate-400 hover:text-slate-500 rounded-full">
|
|
<span className="sr-only">Menu</span>
|
|
<svg className="w-8 h-8 fill-current" viewBox="0 0 32 32">
|
|
<circle cx="16" cy="16" r="2" />
|
|
<circle cx="10" cy="16" r="2" />
|
|
<circle cx="22" cy="16" r="2" />
|
|
</svg>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
);
|
|
}
|
|
|
|
export default ValidateTableItem;
|