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.
172 lines
6.5 KiB
172 lines
6.5 KiB
import { useState } from "react"; |
|
import avatar1 from "../../assets/img/avatar/alexander-hipp-iEEBWgY_6lA-unsplash.jpg"; |
|
import avatar2 from "../../assets/img/avatar/julian-wan-WNoLnJo7tS8-unsplash.jpg"; |
|
import avatar3 from "../../assets/img/avatar/alex-suprun-bYODySpLIhE-unsplash.jpg"; |
|
import avatar4 from "../../assets/img/avatar/alex-suprun-ZHvM3XIOHoE-unsplash.jpg"; |
|
import avatar5 from "../../assets/img/avatar/nicolas-horn-MTZTGvDsHFY-unsplash.jpg"; |
|
import avatar6 from "../../assets/img/avatar/sarah-brown-tTdC88_6a_I-unsplash.jpg"; |
|
import sendIcon from "../../assets/img/vuesax-linear-direct-left.svg"; |
|
|
|
import { BsCheck2All, BsTelephone } from "react-icons/bs"; |
|
|
|
|
|
const Messages=()=>{ |
|
const [contacts] = useState([ |
|
{ |
|
id: 1, |
|
firstName: "فرشید", |
|
lastName: "وکیلی", |
|
lastMessage: "سلام فرشید جان لطفا با من تماس بگیر کار خیلی واجبی دارم", |
|
newMessages: 2, |
|
messageSituation: 0, |
|
img: avatar1, |
|
time: "11:11", |
|
}, |
|
{ |
|
id: 2, |
|
firstName: "امیر", |
|
lastName: "ناظمی", |
|
lastMessage: "سلام امیر جان لطفا با من تماس بگیر کار خیلی واجبی دارم", |
|
newMessages: 1, |
|
messageSituation: 0, |
|
img: avatar2, |
|
time: "12:11", |
|
}, |
|
{ |
|
id: 3, |
|
firstName: "آراد", |
|
lastName: "طاهری", |
|
lastMessage: "سلام آراد جان لطفا با من تماس بگیر کار خیلی واجبی دارم", |
|
newMessages: 0, |
|
messageSituation: 1, |
|
img: avatar3, |
|
time: "13:11", |
|
}, |
|
{ |
|
id: 4, |
|
firstName: "آرتا", |
|
lastName: "الماسی", |
|
lastMessage: "سلام آرتا جان لطفا با من تماس بگیر کار خیلی واجبی دارم", |
|
newMessages: 0, |
|
messageSituation: 2, |
|
img: avatar4, |
|
time: "10:11", |
|
}, |
|
{ |
|
id: 5, |
|
firstName: "آروین", |
|
lastName: "اشرفی", |
|
lastMessage: "سلام آرمین جان لطفا با من تماس بگیر کار خیلی واجبی دارم", |
|
newMessages: 0, |
|
messageSituation: 0, |
|
img: avatar5, |
|
time: "16:11", |
|
}, |
|
{ |
|
id: 6, |
|
firstName: "پارسا", |
|
lastName: "کاظمی", |
|
lastMessage: "سلام پارسا جان لطفا با من تماس بگیر کار خیلی واجبی دارم", |
|
newMessages: 0, |
|
messageSituation: 1, |
|
img: avatar1, |
|
time: "17:11", |
|
}, |
|
{ |
|
id: 7, |
|
firstName: "سارا", |
|
lastName: "منتظری", |
|
lastMessage: "سلام سارا جان لطفا با من تماس بگیر کار خیلی واجبی دارم", |
|
newMessages: 2, |
|
messageSituation: 0, |
|
img: avatar6, |
|
time: "18:11", |
|
}, |
|
]); |
|
|
|
//textareaHanler-------------------- |
|
const textareaHanler=(e)=>{ |
|
e.target.style.height = `3rem`; |
|
let scHeight = e.target.scrollHeight; |
|
e.target.style.height = `${scHeight}px`; |
|
} |
|
return ( |
|
<div className="Messages w-[93.5%] h-[91.5%] absolute top-[8.5%] z-0 left-0 bg-color5 flex border-t border-color7"> |
|
<div className="Messages-main-box w-3/4 h-full relative"> |
|
<div className="Messages-main-box-header w-full h-[8%] bg-white flex items-center justify-between px-6 flex-row-reverse"> |
|
<div className="Messages-main-box-header-name">امیر ناظمی</div> |
|
<BsTelephone className="text-2xl" /> |
|
</div> |
|
<div className="Messages-main-box-chat-box w-full h-[84%] flex items-ceter justify-between px-4"></div> |
|
<div className="Messages-main-box-footer w-full py-2 bg-white flex items-center justify-between flex-row-reverse absolute bottom-0 "> |
|
<textarea |
|
name="Messages-main-box-footer-textarea" |
|
id="Messages-main-box-footer-textarea" |
|
className="Messages-main-box-footer-textarea w-[93%] h-12 max-h-72 pr-4 outline-0 pt-2" |
|
style={{ resize: "none", direction: "rtl" }} |
|
placeholder="پیام..." |
|
onKeyUp={(e) => textareaHanler(e)} |
|
></textarea> |
|
<img |
|
src={sendIcon} |
|
alt="sendIcon" |
|
className="absolute w-8 bottom-[25%] left-4" |
|
/> |
|
</div> |
|
</div> |
|
{/* ----contacts------------- */} |
|
<div className="Messages-contacts w-1/4 h-full bg-white px-2 max-h-full overflow-y-auto"> |
|
{contacts.map((item, index) => ( |
|
<div |
|
key={index} |
|
className="Messages-contacts-item w-full py-4 border-b border-color7 flex items-center justify-between flex-row-reverse" |
|
> |
|
<div className="Messages-contacts-item-img-container w-14 h-14 rounded-full overflow-hidden flex items-ceter justify-center"> |
|
<img src={item.img} alt="avatar" className="w-full" /> |
|
</div> |
|
<div className="Messages-contacts-item-info w-[68%]"> |
|
<div className="Messages-contacts-item-info-name w-full text-right"> |
|
{item.firstName} {item.lastName} |
|
</div> |
|
<div |
|
className="Messages-contacts-item-info-last-message w-full text-right text-xs overflow-hidden text-ellipsis whitespace-nowrap mt-2" |
|
style={{ color: "#8D8D8D", direction: "rtl" }} |
|
> |
|
{item.lastMessage} |
|
</div> |
|
</div> |
|
<div className="Messages-contacts-item-details w-[9%] min-h-[57px] "> |
|
<div |
|
className="Messages-contacts-item-details-time w-full text-sm text-left mb-4" |
|
style={{ color: "#A5A5A5" }} |
|
> |
|
{item.time} |
|
</div> |
|
{item.newMessages !== 0 && ( |
|
<div className="Messages-contacts-item-details-newMessages text-sm w-[70%] aspect-square flex items-center justify-center rounded-full bg-color2 text-white "> |
|
{item.newMessages} |
|
</div> |
|
)} |
|
{item.messageSituation !== 0 && ( |
|
<div className="Messages-contacts-item-details-messageSituation"> |
|
<BsCheck2All |
|
className="text-lg " |
|
style={ |
|
item.messageSituation === 1 |
|
? { color: "#979797" } |
|
: item.messageSituation === 2 |
|
? { color: "#267DE9" } |
|
: null |
|
} |
|
/> |
|
</div> |
|
)} |
|
</div> |
|
</div> |
|
))} |
|
</div> |
|
</div> |
|
); |
|
} |
|
|
|
export default Messages; |