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

3 years ago
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;