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.
74 lines
2.7 KiB
74 lines
2.7 KiB
import "./index.scss"; |
|
|
|
const TimeLineItem = ({ data }) => ( |
|
<div |
|
className="timeline-item flex flex-row mt-5 w-1/2 self-end justify-start" |
|
style={{ paddingRight: "30px" }} |
|
> |
|
<div |
|
className="timeline-item-content relative bg-white rounded-md shadow-sm flex flex-col items-end border border-[#D6D6D6] " |
|
style={{ maxWidth: "100%", width: "400px" }} |
|
> |
|
{/* top --> time & date */} |
|
<div className="flex flex-row items-center w-full p-3 justify-between"> |
|
{data.active && ( |
|
<div className="bg-blue-500 border-4 border-[#D4E6FF99] w-4 h-4 rounded-full"></div> |
|
)} |
|
<div className="flex flex-row-reverse self-end"> |
|
<time className="text-xs text-[#0A7C9F]">{data.date}</time> |
|
<span className="text-xs text-[#0A7C9F]">-</span> |
|
<time className="text-xs text-[#0A7C9F] ml-1">{data.time}</time> |
|
</div> |
|
</div> |
|
{/* middle --> title & content */} |
|
<div className="bg-[#F3F3F3] w-full px-4 py-2 flex flex-row items-center"> |
|
<div className="bg-[#65A9FF] w-1 h-full rounded ml-2"></div> |
|
<p className="text-right text-sm font-bold text-[#00253A]"> |
|
{data.text} |
|
</p> |
|
</div> |
|
<p className="mt-2 text-xs text-justify px-4 text-[#00253A99] text-light leading-6"> |
|
{data.content} |
|
</p> |
|
{/* divider */} |
|
<div className="border border-[#F3F3F3] w-11/12 mt-4 mx-auto"></div> |
|
{/* bottom --> users */} |
|
<div className="flex flex-row justify-between px-4 py-2 w-full"> |
|
<div className="flex flex-row items-center"> |
|
<div className="bg-[#EDF2FB] w-1 h-5 rounded"></div> |
|
{data.users.slice(0, 3).map((user, index) => ( |
|
<div key={index} className="flex flex-row items-center"> |
|
<p className="mr-1 text-xs text-[#00253A]"> |
|
{user.name + " " + user.lname} |
|
</p> |
|
{Number(index) >= 2 ? ( |
|
<p className=" text-xs mx-1 text-[#00253A]">و</p> |
|
) : ( |
|
<p className=" text-xs text-[#00253A]">،</p> |
|
)} |
|
{Number(index) === 2 && ( |
|
<p className=" text-xs text-[#00253A]"> |
|
{data.users.length - 2}+ نفر دیگه |
|
</p> |
|
)} |
|
</div> |
|
))} |
|
</div> |
|
{/* profilePic */} |
|
<div className="flex flex-row items-center"> |
|
{data.users.slice(0, 3).map((user, i) => ( |
|
<img |
|
key={i} |
|
src={user.profilePic} |
|
className="w-10" |
|
style={{ marginLeft: "-10px" }} |
|
/> |
|
))} |
|
</div> |
|
</div> |
|
<span className="circle"></span> |
|
</div> |
|
</div> |
|
); |
|
|
|
export default TimeLineItem;
|
|
|