Zoom

---
import type { ImageType } from "$common/types";

import Zoom from "$components/zoom/Zoom.astro";
import Image from "$components/image/Image.astro";

const images: ImageType[] = [
  {
    src: "https://cdn.devdojo.com/images/june2023/mountains-01.jpeg",
    alt: "Photo of Mountains",
  },
  {
    src: "https://cdn.devdojo.com/images/june2023/mountains-02.jpeg",
    alt: "Photo of Mountains 02",
  },
  {
    src: "https://cdn.devdojo.com/images/june2023/mountains-03.jpeg",
    alt: "Photo of Mountains 03",
  },
  {
    src: "https://cdn.devdojo.com/images/june2023/mountains-04.jpeg",
    alt: "Photo of Mountains 04",
  },
  {
    src: "https://cdn.devdojo.com/images/june2023/mountains-05.jpeg",
    alt: "Photo of Mountains 05",
  },
  {
    src: "https://cdn.devdojo.com/images/june2023/mountains-06.jpeg",
    alt: "Photo of Mountains 06",
  },
  {
    src: "https://cdn.devdojo.com/images/june2023/mountains-07.jpeg",
    alt: "Photo of Mountains 07",
  },
  {
    src: "https://cdn.devdojo.com/images/june2023/mountains-08.jpeg",
    alt: "Photo of Mountains 08",
  },
  {
    src: "https://cdn.devdojo.com/images/june2023/mountains-09.jpeg",
    alt: "Photo of Mountains 09",
  },
  {
    src: "https://cdn.devdojo.com/images/june2023/mountains-10.jpeg",
    alt: "Photo of Mountains 10",
  },
];
---

<Zoom>
  <ul
    x-data={`{ images: ${JSON.stringify(images)} }`}
    class="grid grid-cols-2 gap-5 lg:grid-cols-5"
  >
    <template x-for="(image, index) in images">
      <li>
        <Image
          class="object-cover select-none w-full h-auto bg-gray-200 rounded cursor-zoom-in aspect-[5/6] lg:aspect-[2/3] xl:aspect-[3/4]"
          :src="image.src"
          :alt="image.alt"
          @click="zoomIn(image)"
        />
      </li>
    </template>
  </ul>
</Zoom>

---
import type { ImageType } from "$common/types";

import Zoom from "$components/zoom/Zoom.astro";
import Image from "$components/image/Image.astro";

const images: ImageType[] = [
  {
    src: "https://cdn.devdojo.com/images/june2023/mountains-01.jpeg",
    alt: "Photo of Mountains",
  },
  {
    src: "https://cdn.devdojo.com/images/june2023/mountains-02.jpeg",
    alt: "Photo of Mountains 02",
  },
  {
    src: "https://cdn.devdojo.com/images/june2023/mountains-03.jpeg",
    alt: "Photo of Mountains 03",
  },
  {
    src: "https://cdn.devdojo.com/images/june2023/mountains-04.jpeg",
    alt: "Photo of Mountains 04",
  },
  {
    src: "https://cdn.devdojo.com/images/june2023/mountains-05.jpeg",
    alt: "Photo of Mountains 05",
  },
  {
    src: "https://cdn.devdojo.com/images/june2023/mountains-06.jpeg",
    alt: "Photo of Mountains 06",
  },
  {
    src: "https://cdn.devdojo.com/images/june2023/mountains-07.jpeg",
    alt: "Photo of Mountains 07",
  },
  {
    src: "https://cdn.devdojo.com/images/june2023/mountains-08.jpeg",
    alt: "Photo of Mountains 08",
  },
  {
    src: "https://cdn.devdojo.com/images/june2023/mountains-09.jpeg",
    alt: "Photo of Mountains 09",
  },
  {
    src: "https://cdn.devdojo.com/images/june2023/mountains-10.jpeg",
    alt: "Photo of Mountains 10",
  },
];
---

<Zoom showNavigation>
  <ul
    x-data={`{ images: ${JSON.stringify(images)} }`}
    @previous.window={`
        if (zoom) {
            index = images.findIndex((image) => image.src === selectedImage.src)
            if (index === 0) {
                selectImage(images[images.length - 1]);
            } else {
                selectImage(images[index - 1]);
            }
        }
    `}
    @next.window={`
        if (zoom) {
            index = images.findIndex((image) => image.src === selectedImage.src)
            if (index === images.length - 1) {
                selectImage(images[0]);
            } else {
                selectImage(images[index + 1]);
            }
        }
    `}
    class="grid grid-cols-2 gap-5 lg:grid-cols-5"
  >
    <template x-for="(image, index) in images">
      <li>
        <Image
          class="object-cover select-none w-full h-auto bg-gray-200 rounded cursor-zoom-in aspect-[5/6] lg:aspect-[2/3] xl:aspect-[3/4]"
          :src="image.src"
          :alt="image.alt"
          @click="zoomIn(image)"
        />
      </li>
    </template>
  </ul>
</Zoom>