Skip to content

Instantly share code, notes, and snippets.

@peteraiello

peteraiello/.js

Created August 25, 2020 09:09
Show Gist options
  • Save peteraiello/f5f355c0c664e8fe8d0c0fc56e6eecab to your computer and use it in GitHub Desktop.
Save peteraiello/f5f355c0c664e8fe8d0c0fc56e6eecab to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. peteraiello created this gist Aug 25, 2020.
    35 changes: 35 additions & 0 deletions .js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,35 @@
    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;