<script lang="ts" module>
	import json from "./dic.json";
	import "./webButton.scss";
	const imageModules = import.meta.glob(
		"./imgs/*.{avif,AVIF,heif,HEIF,jpeg,JPEG,jpg,JPG,png,PNG,tiff,TIFF,webp,WEBP,gif,GIF}",
		{
			eager: true,
			import: "default",
			query: {
				enhanced: true,
			},
		},
	);
	// const gifModules = import.meta.glob("./imgs/*.{gif,GIF}", {
	// 	eager: true,
	// 	import: "default",
	// });
	function getImageUrl(name: string): any {
		let query = "./imgs/" + name;
		return imageModules[query];
	}
	export { WebButtons };
</script>

{#snippet WebButtons()}
	{#each json as web_button}
		<a
			class="web_button_container"
			title="{web_button.name} web button (88x31)"
			href={web_button.url}
		>
			<enhanced:img
				class="web_button_img"
				src={getImageUrl(web_button.path)}
				alt="88x31 web button"
				loading="lazy"
			/>
		</a>
	{/each}
{/snippet}
