Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | 7x 7x 7x 7x 7x 14x 1x | import React, { useState } from 'react'; import './ProductImages.scss'; import Overlay from '../Overlay/Overlay'; import AlertInfo from '../../helpers/AlertInfo/AlertInfo' export default function ProductsImages({ product }) { const [mainImage, setMainImage] = useState(product.hero.href) const [displayCarosuel, setDisplayCarosuel] = useState(false) let { images } = product const closeOverLay = () => { setDisplayCarosuel(false) } return ( <React.Fragment> {<div className="medium-6 columns"> <a data-open="exampleModal8" onClick={() => { setDisplayCarosuel(true) }}> <img className="thumbnail main-image" src={mainImage} alt={name} /> </a> <div className="row small-up-8"> {images ? images.map((image, index) => { return (<div key={index} className="column"> <a> <img className="thumbnail alt-image" src={image.href} onClick={(e) => { setMainImage(e.target.src) }} /> </a> </div>) }) : <AlertInfo message="Ohh, Alternative images are not available for this product." />} </div> </div>} {displayCarosuel && <Overlay closeoverlay={closeOverLay} images={images} />} </React.Fragment > ) } |