src/pages/gs/index.astro

---
import { Image } from 'astro:assets';
import { GAMES_LINK } from 'astro:env/client';
import Layout from '@layouts/Layout.astro';
import type { ImageMetadata } from 'astro';
import { Icon } from 'astro-icon/components';
import games from "../../data/games.json";
const images = import.meta.glob<{ default: ImageMetadata }>(
    '/src/assets/games/*.{jpeg,jpg,png,gif,webp}'
);
---
<Layout title="" redirect={!GAMES_LINK ? { path: '/', interval: 0 }: undefined}>
    <div class="w-full h-full px-[15%]">
        {GAMES_LINK &&
            <div class="h-[80px] w-full p-0 flex self-center transition duration-200">
                <div class="flex grow items-center justify-left">
                    <a aria-label="home" href="/" class="text-[30px] text-[--accent] mr-[20px]">
                        <Icon name="mdi:chevron-left" />
                    </a>
                    <input oninput="searchGames(this.value)" class="flex flex-grow h-[42px] text-[14px] border-none text-[--text-color] bg-inherit outline-none" placeholder="Search games" id="app-input"></input> 
                </div>
            </div>
            <div class="mt-[10px] pb-[60px] w-full grid justify-center md:justify-between gap-[20px] grid-cols-[repeat(2,60%)] md:grid-cols-[repeat(auto-fill,166px)]">
                {games.map((game) => (
                    <a href={`/gs/${btoa(game.name)}?py=${game.proxy}&url=${btoa(game.url)}&bf=${btoa(game.baseFile)}`} data-name={game.name} class="transition-all hover:scale-105 h-[166px] w-[166px] rounded-[5px] border-transparent bg-cover cursor-pointer">
                        <Image loading="lazy" class="object-cover w-[166px] h-[166px] rounded-[5px]" src={images[game.img]()} alt={`${game.name}'s logo`} />
                    </a>
                ))}
            </div>
        }
    </div>
</Layout>
<script>
    window.searchGames = function(val: string) {
        let elements: NodeListOf<HTMLElement> = document.querySelectorAll('[data-name]');
        let count = 0;
        elements.forEach(node => {
            if (node.dataset.name === undefined) {
                return;
            }
            if (node.dataset.name.toLowerCase().includes(val.toLowerCase())) {
                node.classList.remove('hidden');
                count++
            } else {
                node.classList.add('hidden');
            }
        })
        if (!count) {
            elements.forEach(node => {
                node.classList.remove('hidden');
            })
        }
    }
</script>