ptb-fe/components/PT/Timeline.js

import moment from "moment";

function Timeline({ data }) {
	return (
		<ul className="timeline">
			{data.data
				.filter((e) => e.for_pt)
				.map((data, i) => (
					<>
						<li className="timeline-separator" data-datetime={moment(data.createdAt).format("DD MMMM YYYY")}></li>
						<li className={data.role === "PT" ? "timeline-inverted" : ""}>
							<div className="timeline-badge info">
								<em className="far fa-file"></em>
							</div>

							<div className="timeline-card">
								<div className="popover right">
									<div className="arrow"></div>
									<div className="popover-body">
										<div className="d-flex align-items-center mb-3">
											<img className="mr-3 rounded-circle thumb48" src="/static/img/user/admin.png" alt="Avatar" />
											<p className="m-0">
												<strong>{data.role}</strong>
												<br />
												{data.description}
											</p>
										</div>
										{data.data.files ? (
											<>
												<p className="text-muted my-2">Dokumen</p>
												{data.data.files.map((e) => (
													<div className="media bb p-2">
														<div className="media-body">
															<p className="m-0">
																<a href={`data:${e.type};base64, ${Buffer.from(e.data).toString("base64")}`} download={e.name}>
																	<strong>{e.name}</strong>
																</a>
															</p>
														</div>
													</div>
												))}
											</>
										) : (
											""
										)}
									</div>
								</div>
							</div>
						</li>
					</>
				))}

			<li className="timeline-end">
				<a className="timeline-badge">
					<em className="fa fa-plus"></em>
				</a>
			</li>
		</ul>
	);
}

export default Timeline;