First move the existing Ad features from AdCard.js
it’s own component.
// components/cards/AdFeatures.js
// move code from AdCard.js
import { IoBedOutline } from "react-icons/io5";
import { TbBath } from "react-icons/tb";
import { BiArea } from "react-icons/bi";
export default function AdFeatures({ ad }) {
return (
<p className="card-text d-flex justify-content-between mt-3">
{ad?.bedrooms ? (
<span>
<IoBedOutline /> {ad?.bedrooms}
</span>
) : (
""
)}
{ad?.bathrooms ? (
<span>
<TbBath /> {ad?.bathrooms}
</span>
) : (
""
)}
{ad?.landsize ? (
<span>
<BiArea /> {ad?.landsize}
</span>
) : (
""
)}
<span>{ad?.type}</span>
</p>
);
}
Import and use in AdCard and AdView
<AdCard ad={ad} />