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.

171 lines
6.0 KiB

import React, { useState } from "react";
import arrowDown from "./arrow-down.svg";
import arrowUp from "./arrow-up.svg";
const TableDesign1 = ({ tableItems, tableSubItems }) => {
const [sortedField, setSortedField] = useState(null);
if (sortedField !== null) {
tableSubItems.sort((a, b) => {
if (a.payedPrice > b.payedPrice) {
return -1;
}
});
}
return (
<section className="w-8/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="" key={index}>
<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={arrowUp}
alt=""
className="w-4 cursor-pointer rotate-180"
/>
</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"
// onClick={() => setSortedField}
/>
<img
src={arrowUp}
alt=""
className="w-4 cursor-pointer rotate-180"
/>
</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"
onClick={() => setSortedField()}
/>
<img
src={arrowUp}
alt=""
className="w-4 cursor-pointer rotate-180"
// onClick={() => setSortedField()}
/>
</div>
</div>
</th>
</tr>
))}
</thead>
<tbody className="bg-white divide-y divide-gray-200">
{tableSubItems.map((tableSubItem, i) => (
<tr key={i}>
<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: 73,
},
{
title: "آزمون آنلاین درس علوم تجربی",
status: false,
date: "1400/09/21",
payedPrice: 75,
},
{
title: "مایکروویر سامسونگ مدل",
status: true,
date: "1400/09/21",
payedPrice: 25,
},
{
title: "آزمون آنلاین درس علوم تجربی",
status: false,
date: "1400/09/21",
payedPrice: 27,
},
],
};