import React from 'react' ; import { ImageIcon } from './Icon' ; import classNames from 'classnames' ; import { angles , Picture , Pictures } from '../redux/types' ; function Preview ( { pictureKey , picture , active , } ) { return ( < li className = { classNames ( { active } ) } style = { { backgroundImage : picture && `url(${ picture . src })` , } } > < span className = "image-icon" > < span className = "icon-wrapper" > < ImageIcon next = { pictureKey } /> < /span> < /span> < /li>); } export default function CreepyFaceOptions ( { pictures , next , } ) { return ( < div id = "options" > < ul className = "thumbnails" > < Preview pictureKey = "serious" active = { next === 'serious' } picture = { pictures [ 'serious' ] } / > < Preview pictureKey = "hover" active = { next === 'hover' } picture = { pictures [ 'hover' ] } / > { angles . map ( ( angle ) => ( < Preview key = { angle } pictureKey = { angle } active = { next === angle } picture = { pictures [ angle ] } / > ) ) } < /ul> < /div>); }