<script>
    let category_list = ["Завтраки", "Коктейли", "Закуски", "Салаты", "Соусы", "Десерты", "Выпечка", "Основные блюда", "Супы"]
    let serverurl = 'http://127.0.0.1:3000';
</script>

<div class="bg-white">
    <div class="mx-auto max-w-2xl px-4 py-16 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8">
        <h2 class="sr-only">Products</h2>
        <div class="grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
        {#each category_list as category}
        <a href="/categories/{category}" class="relative group transition duration-300 hover:scale-110">
            <div class="aspect-h-1 aspect-w-1 w-full h-full overflow-hidden rounded-lg bg-gray-200 xl:aspect-h-8 xl:aspect-w-7">
                <img src="{serverurl}/recipe_image?filename=1b0dc44c-5dc3-4a74-9bb8-1a079999caa9.jpg" alt="{category}" class="brightness-30 h-full w-full object-cover object-center transition duration-700 group-hover:brightness-50">
                <p class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-lg font-bold text-slate-200 group-hover:text-white duration-700">{category}</p>
            </div>
        </a>
        {/each}
        </div>
    </div>
</div>

<style>
    .brightness-30 {
        --tw-brightness: brightness(.3);
        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
    }
</style>