66 lines
2.6 KiB

import React from "react";
import list from "./data";
const colors = ['bg-white', 'bg-blue-200', 'bg-green-200', 'bg-red-200'];
const statuses = ['کاری انجام نشده', 'در حال انجام', 'انجام شد', 'به مشکل خوردم'];
function Bugs({}) {
return (
<ul className="flex flex-col w-4/5 gap-4 mx-auto h-screen">
<div className="w-full flex justify-center mx-auto">
<div className="flex flex-col w-full">
<div className="w-full">
<div className="w-full ">
<table className="w-full">
<thead className="bg-gray-500">
<tr>
<th className="px-6 py-2 text-tiny text-white">Title</th>
<th className="px-6 py-2 text-tiny text-white">
Description
</th>
<th className="px-6 py-2 text-tiny text-white">Status</th>
<th className="px-6 py-2 text-tiny text-white">
Developer
</th>
</tr>
</thead>
<tbody
className="overflow-y-scroll"
style={{ minHeight: "100%" }}
>
{list.map((bug, index) => (
<tr
className={`whitespace-nowrap p-2 w-full border border-solid border-gray-300 ${
colors[bug.status]
}`}
key={bug.title}
>
<td className="px-6 py-4 text-center border border-solid border-gray-300">
<div className="text-sm text-gray-900">{bug.title}</div>
</td>
<td className="px-6 py-4 text-center border border-solid border-gray-300">
<div className="text-sm text-gray-900">
{bug?.description}
</div>
</td>
<td className="px-6 py-4 text-sm text-gray-900 text-center border border-solid border-gray-300">
{statuses[bug.status]}
</td>
<td className="px-6 py-4 text-center border border-solid border-gray-300">
<div className="text-sm text-gray-900">
{bug?.developer}
</div>
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</div>
</div>
</ul>
);
}
export default Bugs;