<script>
    let category_list = [
        {
            title: "Основные блюда",
            img: "b087e87a-64d0-447d-be54-354657edc129.jpg"
        },
        {
            title: "На сковороде",
            img: "d908f9a4-5bd1-40c6-9a20-74aa54b8ed8f.jpg"
        },
        {
            title: "Домашняя кухня",
            img: "40273cc9-7ac1-4560-8737-a0e538869d52.jpg"
        },
        {
            title: "Итальянская кухня",
            img: "9c24c4d7-b4ec-45d7-b069-a7360af0b579.jpg"
        },
        {
            title: "Китайская кухня",
            img: "2b4091fa-74bb-4608-981f-b115ed8273de.jpg"
        },
        {
            title: "Соусы",
            img: "fe444b6d-6db1-4e9a-b6aa-8a1242272a2c.jpg"
        },
        {
            title: "Десерты",
            img: "2b4870ad-f0c5-4f09-95a3-2368a5cef56b.jpg"
        },
        {
            title: "В духовке",
            img: "3c530d7c-652c-4e37-99c0-32b2722b15b1.jpg"
        },
        {
            title: "Корейская кухня",
            img: "575663f0-0a9f-40de-a6e0-4c9a4d6baac2.jpg"
        },
    ]
    let serverurl = 'https://recipesapi.computernetthings.ru';
</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-3 xl:gap-x-8">
        {#each category_list as category}
        <a href="/categories/{category.title}" class="relative group transition duration-300 hover:scale-110">
            <div id="category" 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_img?filename={category.img}" alt="{category.title}" 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-center font-bold text-slate-200 group-hover:text-white duration-700">{category.title}</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);
    }

    #category {
        font-size: 3dvh;
    }
</style>