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
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;
|