NoJS Astro + TailwindCSS Gallery with Lightbox Zoom

Gallery.astro

---
// NoJS Astro + TailwindCSS Gallery with Lightbox Zoom
// Usage:
//   <Gallery  
//     gallery="Cute Kittens"
//     dir="cute-kittens"
//     alt="Pictures of cute kittens"
//   />

import fs from "node:fs";

export interface Props {
  gallery: string;  
  dir: string; 
  alt: string; 
}

const { gallery, dir, alt } = Astro.props;

const images = fs.readdirSync("./public/images/" + dir + "/");
---

<div class="grid grid-cols-2 gap-2 sm:grid-cols-3">
  {
    images.map((image, id) => (
      <>
        <a href={"#" + gallery + "-" + id} id={"i" + gallery + "-" + id} class="scroll-mt-20">
          <img
            src={"/images/" + dir + "/" + image}
            class="aspect-square rounded-lg object-cover object-center"
            {alt}
          />
        </a>
        <a
          href={"#i" + gallery + "-" + id}
          class="hidden fixed z-50 inset-0 p-4 sm:p-6 bg-black/80 target:block items-center"
          id={gallery + "-" + id}
        >
          <img
            src={"/images/" + dir + "/" + image}
            class="w-full h-full object-center object-contain"
            {alt}
          />
        </a>
      </>
    ))
  }
</div>