Gallery.astro

---
interface Props {
	app?: string;
	page?: string;
	theme?: string;
	device?: string;
	shot?: string;
	title?: string;
	retake?: boolean;
}

const { app, page, theme, device, shot, title, retake } = Astro.props;

const images = await Astro.glob("../content/assets/images/dev/**").then(
	(files) => {
		return files.map((file) => file.default);
	}
);

const hasApp = app && !page ? `${app}-` : "";
const hasPage = app && page ? `${app}-${page}` : "";
const hasTheme = theme ? `[${theme}]` : "[light]";
const hasDevice = device ? `[${device}]` : "";
const hasShot = shot ? `[${shot}]` : "";

const filteredImages = images.filter(
	({ src }) =>
		src.includes(hasApp) &&
		src.includes(hasPage) &&
		src.includes(hasTheme) &&
		src.includes(hasDevice) &&
		src.includes(hasShot)
);

const sortedImages = filteredImages.sort((a, b) => {
	const numA = a.src.match(/\d+/g)?.map(Number)[0]; // Extracts the first number from the string
	const numB = b.src.match(/\d+/g)?.map(Number)[0]; // Extracts the first number from the string

	if (numA && numB) {
		return numA - numB; // Sorts in ascending order
	} else {
		return 0; // If no numbers are found, don't change the order
	}
});

const isStack = shot == "stack" ? true : false;

const renderImages = isStack ? sortedImages : filteredImages;
---

<section class="mt-24">
	<div class="flex items-center flex-col w-full">
		<h3 class="text-slate-100 text-2xl mb-8 w-full max-w-6xl text-left">
			{title}
		</h3>
	</div>
	<div class={`flex flex-col w-full ${isStack ? "gap-0" : "gap-16"}`}>
		{
			renderImages.map(({ src }) => (
				<article class="flex items-center justify-center">
					<img
						class={`object-contain h-full w-full md:max-w-6xl ${
							retake ? "outline-4 outline-red-500 outline" : null
						}`}
						src={src}
						alt=""
						loading="lazy"
					/>
				</article>
			))
		}
	</div>
</section>