In this section, I have created a div class that contains an image tag to display the profile picture. Following that, there is a <TextInput> element styled using CSS. Outside of the <TextInput/>, there is a custom button for submitting posts.
I am looking to incorporate the <IoMdSend/> icon inside the text input. However, when I attempt to do so, it results in errors or the icon does not appear correctly on the frontend; sometimes it even ends up below the text input. How can I successfully add this icon here?
<div className="w-full flex items-center justify-between gap-2 py-4 border-b border-[#66666645]">
<img
src={user?.profileUrl ?? NoProfile}
alt="User Image"
className="w-14 h-14 rounded-full object-cover"
/>
<TextInput
styles="w-full rounded-full py-5 px-4 pr-12 position: relative" // Add position: relative for child elements
placeholder="What's on your mind...."
name="description"
register={register("description", {
required: "Write something about post",
})}
error={errors.description ? errors.description.message : ""}
>
</TextInput>
{/* <IoMdSend
style={{
fontSize: "2.2rem",
color: "#ccc",
}}
/> */}
{posting ? (
<Loading />
) : (
<CustomButton
type="submit"
title="Post"
containerStyles="bg-[#0444a4] text-white py-1 px-4 rounded-full font-semibold text-sm"
/>
)}
</div>
>