<script>
    let category_list = [
        {
            title: "На сковороде",
            img: "1b0dc44c-5dc3-4a74-9bb8-1a079999caa9.jpg"
        },
        {
            title: "Коктейли",
            img: "0334e507-d2c2-4ca5-9aea-c144fbcafb76.jpg"
        },
        {
            title: "Закуски",
            img: "00651793-d00c-4f39-aa07-3d5d5911aa8c.jpg"
        },
        {
            title: "Салаты",
            img: "039b0932-56fc-47da-83c9-62c95f227412.jpg"
        },
        {
            title: "Соусы",
            img: "06b85ba2-0665-40b7-9e3e-b2473dde97f2.jpg"
        },
        {
            title: "Десерты",
            img: "07bcfe9b-d44a-47b1-adfb-3afa0694eda2.jpg"
        },
        {
            title: "Выпечка",
            img: "06f68dda-2949-41e2-a307-efaaf5eecbbf.jpg"
        },
        {
            title: "Основные блюда",
            img: "d6960f87-4936-439a-86fe-54d5508f06f8.jpg"
        },
        {
            title: "Супы",
            img: "08c99a7f-66ef-4651-b26b-c2e48e901294.jpg"
        },
    ]
    let serverurl = 'http://192.168.0.105: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-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_image?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);
    }

    @font-face {
        font-family: 'RobotoRegular';
        font-style: normal;
        font-weight: 400;
        src: url('/fonts/Roboto-Regular.ttf');
    }

    @font-face {
        font-family: 'AlegreyaSansSC';
        font-style: normal;
        font-weight: 800;
        src: url('/fonts/Alegreyasansscextrabold.ttf');
    }

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