ptb-fe/components/PencabutanSanksi/TableSanksi.js

import Datatable from "@/components/Tables/Datatable";
import { Button } from "reactstrap";
import Link from "next/link";
import moment from "moment";

function TableSanksi({ listData, to, linkName }) {
	return (
		<div className="card b">
			<div className="card-body">
				<Datatable options={{ responsive: true }}>
					<table className="table w-100">
						<thead>
							<tr>
								<th>Nomor Sanksi</th>
								<th>Keterangan Sanksi</th>
								<th>Created</th>
								<th>Status</th>
								<th></th>
							</tr>
						</thead>
						<tbody>
							{listData.length
								? listData.map((data) => {
										return (
											<tr key={data._id}>
												<td>{data.sanksi.no_sanksi}</td>
												<td>
													<div className="media align-items-center">
														<div className="media-body d-flex">
															<div>
																<h4 className="m-0">{data.pt.nama}</h4>
																<p>{data.description.length > 25 ? data.description.substring(0, 25) + "..." : data.description}</p>
															</div>
														</div>
													</div>
												</td>
												<td>{moment(data.sanksi.createdAt).fromNow()}</td>
												<td>{data.sanksi.cabut_sanksi.jawaban ? <div className="badge badge-info">Sudah Dijawab</div> : <div className="badge badge-danger">Belum Dijawab</div>}</td>
												<td>
													<div className="ml-auto">
														<Link
															href={{
																pathname: to,
																query: { noSanksi: data.sanksi.no_sanksi, ptId: data.pt_id },
															}}
														>
															<Button color="primary" size="sm">
																{linkName}
															</Button>
														</Link>
													</div>
												</td>
											</tr>
										);
								  })
								: ""}
						</tbody>
					</table>
				</Datatable>
			</div>
		</div>
	);
}

export default TableSanksi;