Spaces:
Paused
Paused
File size: 2,322 Bytes
a0fda44 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
import React from "react";
import CallMessage from "./CallMessage";
import MessageReadStatus from "./MessageReadStatus";
import VoiceMessage from "./VoiceMessage";
import Image from "../../globals/Image";
function Message({ messageData, className, messageReceived }) {
// Image messages
if (messageData.messageType === "image") {
return (
<div className="w-[30rem] rounded-3xl overflow-hidden h-[34rem] relative">
<Image
className="w-full h-full object-cover"
src={messageData.imageUrl}
alt=""
/>
<MessageReadStatus
readStatus={messageData.readStatus}
deliveredStatus={messageData.deliveredStatus}
messageReceived={messageReceived}
time={messageData.timeSent}
className="absolute bottom-[1rem] right-[1rem] bg-secondary-light-text rounded-full !text-white"
/>
</div>
);
}
if (messageData.messageType === "voice")
return (
<VoiceMessage
deliveredStatus={messageData.deliveredStatus}
messageReceived={messageReceived}
voiceDuration={messageData.voiceNoteDuration}
voiceNoteUrl={messageData.voiceNoteUrl}
readStatus={messageData.readStatus}
time={messageData.timeSent}
/>
);
if (messageData.messageType === "call")
// Calls
return (
<CallMessage
callDetails={messageData.callDetails}
messageReceived={messageReceived}
deliveredStatus={messageData.deliveredStatus}
readStatus={messageData.readStatus}
time={messageData.timeSent}
/>
);
// if it's a text message
return (
<div
className={`${className} p-[1.5rem] rounded-3xl sm:text-[1.4rem] overflow-hidden gap-[1rem] relative`}
>
<div
dangerouslySetInnerHTML={{ __html: messageData.message }}
className="font-semibold max-w-[25rem] mr-[3.5rem] break-words"
></div>
<MessageReadStatus
readStatus={messageData.readStatus}
deliveredStatus={messageData.deliveredStatus}
messageReceived={messageReceived}
time={messageData.timeSent}
className={`absolute right-[.8rem] bottom-[.5rem] ${
messageData.deliveredStatus && "!text-secondary"
}`}
/>
</div>
);
}
export default Message;
|