You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
146 lines
5.3 KiB
146 lines
5.3 KiB
3 years ago
|
import React from "react";
|
||
|
|
||
|
import arrowDown from "./arrow-down.svg";
|
||
|
import arrowUp from "./arrow-up.svg";
|
||
|
|
||
|
const TableDesign1 = ({ tableItems, tableSubItems }) => {
|
||
|
return (
|
||
|
<section className="w-10/12 mx-auto my-10">
|
||
|
<div className="flex flex-col">
|
||
|
<div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
|
||
|
<div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
|
||
|
<div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
|
||
|
<table className="min-w-full divide-y divide-gray-200">
|
||
|
<thead className="bg-gray-50">
|
||
|
{tableItems.map((tableItem, index) => (
|
||
|
<tr className="">
|
||
|
<th
|
||
|
scope="col"
|
||
|
className="text-blue-400 font-light text-right text-sm p-4"
|
||
|
>
|
||
|
{tableItem.title}
|
||
|
</th>
|
||
|
<th
|
||
|
scope=""
|
||
|
className="text-blue-400 font-light text-right text-sm p-4 "
|
||
|
>
|
||
|
<div className="flex flex-row items-center">
|
||
|
{tableItem.status}
|
||
|
<div className="mr-3 flex flex-col">
|
||
|
<img
|
||
|
src={arrowUp}
|
||
|
alt=""
|
||
|
className="w-4 cursor-pointer"
|
||
|
/>
|
||
|
<img
|
||
|
src={arrowDown}
|
||
|
alt=""
|
||
|
className="w-4 cursor-pointer"
|
||
|
/>
|
||
|
</div>
|
||
|
</div>
|
||
|
</th>
|
||
|
<th
|
||
|
scope="col"
|
||
|
className="text-blue-400 font-light text-right text-sm p-4"
|
||
|
>
|
||
|
<div className="flex flex-row items-center">
|
||
|
{tableItem.date}
|
||
|
<div className="mr-3 flex flex-col">
|
||
|
<img
|
||
|
src={arrowUp}
|
||
|
alt=""
|
||
|
className="w-4 cursor-pointer"
|
||
|
/>
|
||
|
<img
|
||
|
src={arrowDown}
|
||
|
alt=""
|
||
|
className="w-4 cursor-pointer"
|
||
|
/>
|
||
|
</div>
|
||
|
</div>
|
||
|
</th>
|
||
|
<th
|
||
|
scope="col"
|
||
|
className="text-blue-400 font-light text-right text-sm p-4"
|
||
|
>
|
||
|
<div className="flex flex-row items-center">
|
||
|
{tableItem.payedPrice}
|
||
|
<div className="mr-3 flex flex-col">
|
||
|
<img
|
||
|
src={arrowUp}
|
||
|
alt=""
|
||
|
className="w-4 cursor-pointer"
|
||
|
/>
|
||
|
<img
|
||
|
src={arrowDown}
|
||
|
alt=""
|
||
|
className="w-4 cursor-pointer"
|
||
|
/>
|
||
|
</div>
|
||
|
</div>
|
||
|
</th>
|
||
|
</tr>
|
||
|
))}
|
||
|
</thead>
|
||
|
<tbody className="bg-white divide-y divide-gray-200">
|
||
|
{tableSubItems.map((tableSubItem, i) => (
|
||
|
<tr>
|
||
|
<td className="p-4 whitespace-nowrap text-base font-light">
|
||
|
{tableSubItem.title}
|
||
|
</td>
|
||
|
<td
|
||
|
className={`p-4 whitespace-nowrap text-base font-light
|
||
|
${
|
||
|
tableSubItem.status
|
||
|
? "text-green-400"
|
||
|
: "text-red-400"
|
||
|
}`}
|
||
|
>
|
||
|
{tableSubItem.status ? "فعال" : "غیر فعال"}
|
||
|
</td>
|
||
|
<td className="p-4 whitespace-nowrap text-base font-light">
|
||
|
{tableSubItem.date}
|
||
|
</td>
|
||
|
<td className="p-4 whitespace-nowrap text-base font-light">
|
||
|
{tableSubItem.payedPrice} ریال
|
||
|
</td>
|
||
|
</tr>
|
||
|
))}
|
||
|
</tbody>
|
||
|
</table>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</section>
|
||
|
);
|
||
|
};
|
||
|
|
||
|
export default TableDesign1;
|
||
|
|
||
|
TableDesign1.defaultProps = {
|
||
|
tableItems: [
|
||
|
{
|
||
|
title: "عنوان",
|
||
|
status: "وضعیت",
|
||
|
date: "تاریخ",
|
||
|
payedPrice: "مبلغ پرداختی",
|
||
|
},
|
||
|
],
|
||
|
tableSubItems: [
|
||
|
{
|
||
|
title: "مایکروویر سامسونگ مدل",
|
||
|
status: true,
|
||
|
date: "1400/09/21",
|
||
|
payedPrice: 2400000,
|
||
|
},
|
||
|
{
|
||
|
title: "آزمون آنلاین درس علوم تجربی",
|
||
|
status: false,
|
||
|
date: "1400/09/21",
|
||
|
payedPrice: 2400000,
|
||
|
},
|
||
|
],
|
||
|
};
|