redhare-demo/components/order/OrdersTable.jsx

57 lines
1.9 KiB
JavaScript

import { EditIconBtn } from 'components/common/IconBtns'
import moment from 'moment-jalaali'
import Link from 'next/link'
const OrdersTable = props => {
//? Props
const { orders } = props
//? Render(s)
return (
<div className="overflow-x-auto mt-7">
<table className="w-full whitespace-nowrap">
<thead className="h-9 bg-emerald-50">
<tr className="text-emerald-500">
<th className="border-gray-100 border-x-2">ID</th>
<th>收件人姓名</th>
<th>状态</th>
<th className="border-gray-100 border-x-2">电子邮件</th>
<th>下单时间</th>
<th>更改状态</th>
</tr>
</thead>
<tbody className="text-gray-600">
{orders.length > 0 &&
orders.map(order => (
<tr
className="text-xs text-center transition-colors border-b border-gray-100 md:text-sm hover:bg-gray-50"
key={order._id}
>
<td className="py-3 px-1.5">{order._id}</td>
<td className="py-3 px-1.5">{order.user.name}</td>
<td className="py-3 px-1.5">
{order.delivered ? (
<span className="inline-block p-1 text-green-600 rounded-md bg-green-50">
完成
</span>
) : (
<span className="p-1 rounded-md text-amber-600 bg-amber-50">未确认</span>
)}
</td>
<td className="py-3 px-1.5">{order.user.email}</td>
<td>{moment(order.createdAt).format('YYYY-MM-DD HH:mm:ss')}</td>
<td className="p-2">
<Link href={`/admin/orders/${order._id}`}>
<EditIconBtn />
</Link>
</td>
</tr>
))}
</tbody>
</table>
</div>
)
}
export default OrdersTable