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

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;