75 lines
2.3 KiB
JavaScript
75 lines
2.3 KiB
JavaScript
import clsx from "clsx";
|
|
import PropTypes from "prop-types";
|
|
|
|
function ProductListTable({ productInfo, onSelectProduct }) {
|
|
return (
|
|
<table className="w-11/12 border-separate border-spacing-0 rounded-2xl overflow-hidden">
|
|
<thead>
|
|
<tr>
|
|
<th className="border border-t-2 border-l-2 border-primary bg-secondary rounded-ss-2xl font-medium text-[#111]">
|
|
Product Code
|
|
</th>
|
|
<th className="border border-t-2 p-2 border-primary bg-secondary font-medium text-[#111]">
|
|
Description
|
|
</th>
|
|
<th className="border border-t-2 p-2 border-primary bg-secondary font-medium text-[#111]">
|
|
Interest Category
|
|
</th>
|
|
<th className="border border-t-2 border-r-2 p-2 border-primary bg-secondary rounded-se-2xl font-medium text-[#111]">
|
|
Description
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{productInfo.map((prod, idx) => (
|
|
<tr
|
|
key={idx}
|
|
className="cursor-pointer hover:bg-grey/[0.2] border-b"
|
|
onClick={() => onSelectProduct(prod)}
|
|
>
|
|
<td
|
|
className={clsx(
|
|
"border border-l-2 border-primary p-2",
|
|
idx === productInfo.length - 1 && "rounded-bl-2xl border-b-2"
|
|
)}
|
|
>
|
|
{prod.productCode}
|
|
</td>
|
|
<td
|
|
className={clsx(
|
|
"border border-primary p-2",
|
|
idx === productInfo.length - 1 && "border-b-2"
|
|
)}
|
|
>
|
|
{prod.productCodeDescription}
|
|
</td>
|
|
<td
|
|
className={clsx(
|
|
"border border-primary p-2",
|
|
idx === productInfo.length - 1 && "border-b-2"
|
|
)}
|
|
>
|
|
{prod.interestCategory}
|
|
</td>
|
|
<td
|
|
className={clsx(
|
|
"border border-r-2 border-primary p-2",
|
|
idx === productInfo.length - 1 && "rounded-br-2xl border-b-2"
|
|
)}
|
|
>
|
|
{prod.interestCategoryDescription}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
);
|
|
}
|
|
|
|
ProductListTable.propTypes = {
|
|
productInfo: PropTypes.array.isRequired,
|
|
onSelectProduct: PropTypes.func.isRequired,
|
|
};
|
|
|
|
export default ProductListTable;
|