33 lines
1.3 KiB
Svelte
33 lines
1.3 KiB
Svelte
|
<script>
|
||
|
|
import axios from 'axios';
|
||
|
|
let serverurl = 'http://127.0.0.1:3000';
|
||
|
|
let recipes_p = axios.get(serverurl+"/recipes?page=59");
|
||
|
|
recipes_p.then(function (response) {
|
||
|
|
console.log(response);
|
||
|
|
})
|
||
|
|
.catch(function (error) {
|
||
|
|
// handle error
|
||
|
|
console.log(error);
|
||
|
|
})
|
||
|
|
</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">
|
||
|
|
{#await recipes_p}
|
||
|
|
waiting...
|
||
|
|
{:then data}
|
||
|
|
{#each data.data.recipes as recipe (recipe.id)}
|
||
|
|
<a href="/recipe/{recipe.id}" class="group transition duration-300 hover:scale-110">
|
||
|
|
<div class="aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-lg bg-gray-200 xl:aspect-h-8 xl:aspect-w-7">
|
||
|
|
<img src="{serverurl}/recipe_image?filename={recipe.img}" alt="{recipe.title}" class="h-full w-full object-cover object-center transition duration-700 group-hover:opacity-90">
|
||
|
|
</div>
|
||
|
|
<h3 class="mt-3 text-base text-gray-700">{recipe.ctime} / {recipe.cal}</h3>
|
||
|
|
<p class="mt-0 text-lg font-medium text-gray-900">{recipe.title}</p>
|
||
|
|
</a>
|
||
|
|
{/each}
|
||
|
|
{/await}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|