// components/cards/AdCard.js
export default function AdCard({ ad }) {
return (
<div className="col-lg-4 p-4 gx-4 gy-4">
<div className="card hoverable shadow">
<img
src={ad?.photos?.[0]?.Location}
alt={`${ad?.type}-${ad?.address}-${ad?.action}-${ad?.price}`}
style={{ height: "250px", objectFit: "cover" }}
/>
<div className="card-body">
<div className="d-flex justify-content-between">
<h3>{ad?.price}</h3>
</div>
<p>Ad features</p>
</div>
</div>
</div>
);
}
Now import in Home.js
// Home.js
return (
<div>
<h2 className="display-1 bg-primary text-light p-5 h1">For Sell</h2>
<div className="container">
<div className="row">
{adsForSell?.map((ad) => (
<AdCard ad={ad} key={ad._id} />
))}
</div>
</div>
<h2 className="display-1 bg-primary text-light p-5 h1 mt-2">For Rent</h2>
<div className="container">
<div className="row">
{adsForRent?.map((ad) => (
<AdCard ad={ad} key={ad._id} />
))}
</div>
</div>
</div>
);
}