---
interface Props {
	as?: string;
	class?: string;
	name?: string;
	images?: {
		src: string;
		alt?: string;
	}[];
	imageClass?: string;
	loading?: 'lazy' | 'eager';
}

const {
	as = 'div',
	class: className,
	name = 'lightbox',
	images = [],
	imageClass: imageClassName,
	loading = 'lazy',
} = Astro.props;
const TagName = as;
---

<TagName class:list={['lightbox', className]}>
	{
		images.map((image) => {
			return (
				<a
					data-fslightbox={name}
					data-type="image"
					href={image.src}
					class={imageClassName}
				>
					<img
						src={image.src}
						alt={image?.alt || ''}
						loading={loading}
					/>
				</a>
			);
		})
	}
</TagName>

<script
	src="https://cdnjs.cloudflare.com/ajax/libs/fslightbox/3.4.1/index.min.js"
></script>

--- interface Props { as?: string; class?: string; name?: string; images?: { src: string; alt?: string; }[]; imageClass?: string; loading?: 'lazy' | 'eager'; } const { as = 'div', class: className, name = 'lightbox', images = [], imageClass: imageClassName, loading = 'lazy', } = Astro.props; const TagName = as; --- <TagName class:list={['lightbox', className]}> { images.map((image) => { return ( <a data-fslightbox={name} data-type="image" href={image.src} class={imageClassName} > <img src={image.src} alt={image?.alt || ''} loading={loading} /> </a> ); }) } </TagName> <script src="https://cdnjs.cloudflare.com/ajax/libs/fslightbox/3.4.1/index.min.js" ></script>

---
import { twMerge as tw } from 'tailwind-merge';
import Lightbox from '@components/Lightbox.astro';

interface Props {
	class?: string;
	images: {
		src: string;
		alt: string;
	}[];
	imageClass?: string;
}

const { class: className, images, imageClass: imageClassName } = Astro.props;
---

<Lightbox
	class={tw('grid grid-cols-2 md:grid-cols-4 gap-6', className)}
	name="gallery"
	images={images}
	imageClass={imageClassName}
/>

--- import { twMerge as tw } from 'tailwind-merge'; import Lightbox from '@components/Lightbox.astro'; interface Props { class?: string; images: { src: string; alt: string; }[]; imageClass?: string; } const { class: className, images, imageClass: imageClassName } = Astro.props; --- <Lightbox class={tw('grid grid-cols-2 md:grid-cols-4 gap-6', className)} name="gallery" images={images} imageClass={imageClassName} />