import Image from "next/image"; import {Highlight} from "react-instantsearch-dom"; const Hit = ({hit}) => <div> <div className="row image-container"> <div className="col-md d-flex align-items-end justify-content-center"> {/* eslint-disable-next-line @next/next/no-img-element */} <img src={hit.image} alt={hit.name} /> </div> </div> <div className="row mt-5"> <div className="col-md"> <h5> <Highlight hit={hit} attribute="name" tagName="mark" /> </h5> </div> </div> <div className="row mt-2"> <div className="col-md"> <Highlight hit={hit} attribute="description" tagName="mark" /> </div> </div> <div className="row mt-auto"> <div className="col-md"> <div className="hit-price fw-bold mt-4">{hit.price}</div> <div className="hit-rating">Rating: {hit.rating}/5</div> </div> </div> </div>; export default Hit;