92 lines
3.0 KiB
JavaScript
92 lines
3.0 KiB
JavaScript
import React from "react";
|
|
import Avatar from "./Avatar";
|
|
|
|
const Timeline = ({ items = [], transparent = true }) => {
|
|
return (
|
|
<ul
|
|
className={`timeline ${
|
|
transparent ? "timeline-transparent text-start" : ""
|
|
}`}
|
|
>
|
|
{items.map((item) => (
|
|
<li
|
|
key={item.id}
|
|
className={`timeline-item ${
|
|
transparent ? "timeline-item-transparent" : ""
|
|
}`}
|
|
>
|
|
<span
|
|
className={`timeline-point timeline-point-${
|
|
item.color || "primary"
|
|
}`}
|
|
></span>
|
|
|
|
<div className="timeline-event">
|
|
<div className="timeline-header mb-3 d-flex justify-content-between">
|
|
<h6 className="mb-0 text-body">{item.title}</h6>
|
|
<small className="text-body-secondary">{item.timeAgo}</small>
|
|
</div>
|
|
|
|
{item.description && <p className="mb-2">{item.description}</p>}
|
|
|
|
{item.attachments && item.attachments.length > 0 && (
|
|
<div className="d-flex align-items-center mb-2">
|
|
{item.attachments.map((att, i) => (
|
|
<div
|
|
key={i}
|
|
className="badge bg-lighter rounded d-flex align-items-center gap-2 p-2"
|
|
>
|
|
{att.icon && (
|
|
<img
|
|
src={att.icon}
|
|
alt="file"
|
|
width="15"
|
|
className="me-2"
|
|
/>
|
|
)}
|
|
<span className="h6 mb-0">{att.name}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{item.users && item.users.length > 0 && (
|
|
<div className="d-flex flex-wrap align-items-center mb-2">
|
|
<ul className="list-unstyled users-list d-flex align-items-center avatar-group m-0">
|
|
{item.users.map((user, i) => (
|
|
<li key={i} className="avatar me-1" title={user.name}>
|
|
{user.avatar ? (
|
|
<img
|
|
src={user.avatar}
|
|
alt={user.name}
|
|
className="rounded-circle"
|
|
width="32"
|
|
height="32"
|
|
/>
|
|
) : (
|
|
<Avatar
|
|
firstName={user.firstName}
|
|
lastName={user.lastName}
|
|
/>
|
|
)}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
{item.users?.length === 1 && (
|
|
<div className="m-0">
|
|
<p className="mb-0 small fw-medium">{`${item.users[0].firstName} ${item.users[0].lastName}`}</p>
|
|
<small>{item.users[0].role}</small>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
);
|
|
};
|
|
|
|
export default Timeline;
|