-
-
Save peteraiello/f5f355c0c664e8fe8d0c0fc56e6eecab to your computer and use it in GitHub Desktop.
Thumbnail Component from Tailwind Technical Test
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const ThumbnailImages = (props) => { | |
| const imageArray = props.images; | |
| let isActive = props.activeThumb; | |
| let className="border-solid rounded-lg py-2 px-4 mr-2 hover:border-gray-700"; | |
| // set default border | |
| let activeClass = "border-gray-200 border"; | |
| function thumbnailSelect(index) { | |
| return (isActive === index ? activeClass = 'border-gray-700 border-2' : activeClass = 'border-gray-200 border'); | |
| } | |
| return ( | |
| <div> | |
| <ul className="flex"> | |
| {imageArray.map((image, index) => ( | |
| <li key={index}> | |
| <button | |
| label={ thumbnailSelect(index) } | |
| onClick={ () => props.click(index) } | |
| className={className + " " + activeClass | |
| }> | |
| <img src={ "img/" + image + ".jpg" } /> | |
| </button> | |
| </li> | |
| ))} | |
| </ul> | |
| </div> | |
| ) | |
| } | |
| export default ThumbnailImages; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment