import Image from "next/image"; import React from "react"; import { Button } from "react-bootstrap"; const ProductItem = () => { const ListingData = [ { image: "/images/Browse-Experiences/01.png", topRated: "Top Rated", title: "City Climb", discription: "Lorem ipsum dolor sit amet, consectetur adipiscing elit,", price: "200", offPrice: "40%", days: "For 1 Night", taxes: "Includes taxes & Fees" }, { image: "/images/Browse-Experiences/02.png", topRated: "Top Rated", title: "City Climb", discription: "Lorem ipsum dolor sit amet, consectetur adipiscing elit,", price: "200", offPrice: "40%", days: "For 1 Night", taxes: "Includes taxes & Fees" }, { image: "/images/Browse-Experiences/03.png", topRated: "Top Rated", title: "City Climb", discription: "Lorem ipsum dolor sit amet, consectetur adipiscing elit,", price: "200", offPrice: "40%", days: "For 1 Night", taxes: "Includes taxes & Fees" }, { image: "/images/Browse-Experiences/04.png", topRated: "Top Rated", title: "City Climb", discription: "Lorem ipsum dolor sit amet, consectetur adipiscing elit,", price: "200", offPrice: "40%", days: "For 1 Night", taxes: "Includes taxes & Fees" }, { image: "/images/Browse-Experiences/01.png", topRated: "Top Rated", title: "City Climb", discription: "Lorem ipsum dolor sit amet, consectetur adipiscing elit,", price: "200", offPrice: "40%", days: "For 1 Night", taxes: "Includes taxes & Fees" } ]; return ( <> {ListingData && ListingData.map(data => { return ( <div className="item"> <div className="browse-experiences-item"> <div className="img-wrapper"> <span className="image-container"> <Image layout="fill" alt="" className="image img-fluid" src={data.image} /> </span> <div className="top-rated">{data.topRated}</div> </div> <div className="info"> <div className="top-name"> <div className="title">{data.title}</div> <div className="rating-wishlist"> {/* <div className="rating"> <span className="number">8.8</span> <span className="image-container"> <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" /> </span> </div> */} <div className="wishlist"> <span className="image-container"> <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/wishlist.svg" /> </span> </div> </div> </div> {/* <div className="discription"> {data.discription} <a href="">Read More</a> </div> */} <div className="price"> ${data.price} {/* <span className="off">{data.offPrice} OFF</span> */} </div> <div className="detail"> <div className="">{data.days}</div> <div className="">{data.taxes}</div> </div> <div className="explore-now"> <Button variant="primary">Explore Now</Button> </div> </div> </div> </div> ); })} </> ); }; export default ProductItem;