DeliveryBanner Component - AgroLogi/FreshShop GitHub Wiki

The DeliveryBanner component is a reusable React component designed to display delivery-related banners on the e-commerce platform. It accepts a prop, deliveryBanner, which contains an array of banner information. For each banner, the component uses the Next.js Image component to render images in an optimized manner.

Component Overview

Props:

• deliveryBanner: This is an array that contains data about each banner. It includes details such as the image URL and the alt text, which is crucial for accessibility purposes.

Functional Flow:

• The component maps over the deliveryBanner array using the .map() method to access each banner.
• For each banner, an image is rendered using the Next.js Image component.
• The image URL is dynamically fetched from deliveryBanner.attributes?.image?.data[0].attributes?.url, ensuring that the component can handle a variety of images with different URLs.
• The alt attribute is added to each image for accessibility and to describe the image if it fails to load.