66 lines
2.6 KiB
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;
|
|
|