Make sure to transfer the classes
pr-[14px] pl-[14px] pt-[8px] pb-[8px]
to the
reply-gradient and
h1 elements.
Additionally, include rounded-l-[16px] rounded-b-[0] in the reply-gradient for consistent border styles with the parent component.
import Image from "next/image";
import DoubleTickIcon from "../PersonalChatAssets/DoubleTick.png";
import SingleTickIcon from "../PersonalChatAssets/SingleTick.png";
import { useRef, useEffect } from "react";
interface textbody {
content: string;
sent: boolean;
time: string;
replyReference: any;
}
const TextMessage = (props: textbody) => {
console.log("Referece::::", props.replyReference);
return (
<div className="flex flex-col items-end w-[332px] ml-[52px] mr-[20px] mb-[18px]">
<div className="flex justify-center items-center">
<Image src={props.sent ? DoubleTickIcon : SingleTickIcon} alt="" />
<h1 className="font-normal text-[12px] mb-0 font-[#787580]">
{props.time}
</h1>
</div>
//this is its parent
<div className="flex flex-col justify-center items-center bg-[#F7CA16] rounded-l-[16px] font-inter font-[14px] rounded-b-[16px] min-h-[40px] max-w-[340px] min-w-[60px] break-words">
//This is Conditional rendring part
{props.replyReference?.message !== undefined && (
<div className="h-[52px] reply-gradient p-2 pr-[14px] pl-[14px] pt-[8px] pb-[8px] rounded-l-[16px] rounded-b-[0]">
<div className="-space-y-3 overflow-ellipsis truncate border-l-[4px] border-solid border-[#1F1D25] pl-2">
<h1 className="">to {props.replyReference?.author}</h1>
<p className="max-w-[230px] truncate ">
{props.replyReference?.message}
</p>
</div>
</div>
)}
<h1 className="flex justify-center item-center w-full h-full mb-0 pr-[14px] pl-[14px] pt-[8px] pb-[8px]">{props.content}</h1>
</div>
</div>
);
};
export default TextMessage;
For demonstration purposes, you can explore this interactive tool