Image Gallery

  const Gallary = () => {
    const images = [
        {src:"https://flowbite.s3.amazonaws.com/docs/gallery/square/image-1.jpg", alt:""},
        {src: "https://flowbite.s3.amazonaws.com/docs/gallery/square/image-2.jpg", alt:""},
        {src: "https://flowbite.s3.amazonaws.com/docs/gallery/square/image-3.jpg", alt:""}
    ];
 
    return `
      <div 
        class="grid gap-4"
        id="gallary">
        <CurrentImage image=${stringify(images[0])} />
        <Pagination images=${stringify(images)}/>
      </div>
    `;
  }

  const Pagination = (images) => {
    return `
      <div 
        class="grid grid-cols-5 gap-4"
        id="pagination">
        ${images.map((image, key) => {
          return `
          <div id="${key}">
            <img
              onClick="$render(CurrentImage, '${stringify(image)}')"
              class="h-auto max-w-full rounded-lg" 
              src="${image.src}"
            />
          </div>
        `})}
      </div>
    `;
  }

  const CurrentImage = ({src, alt}) => {
    return `
      <div id="current-image">
        <img class="h-auto max-w-full rounded-lg" src="${src}" alt="${alt}">
      </div>
    `;  
  }

$render(Gallery);