totole/scraps
1
0
Fork 0
mirror of https://github.com/kevin-DL/scraps.git synced 2026-01-20 05:15:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

Do the search

Browse Source
This commit is contained in:
kevin-DL
2024-06-22 16:54:14 +01:00
parent fadb1bc00a
commit 01002b31a7
10 changed files with 262 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
resources/js/Pages/Dashboard.vue
View File

@@ -1,6 +1,9 @@
<script setup>
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
import { Head } from '@inertiajs/vue3';
import {Head} from '@inertiajs/vue3';
import RecipeSearchForm from "@/Components/Search/RecipeSearchForm.vue";
</script>
<template>
@@ -13,9 +16,7 @@ import { Head } from '@inertiajs/vue3';
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
<div class="p-6 text-gray-900">You're logged in!</div>
</div>
<recipe-search-form />
</div>
</div>
</AuthenticatedLayout>

44
resources/js/Pages/Search/Recipes.vue Normal file
View File

@@ -0,0 +1,44 @@
<script setup>
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout.vue";
import {Head} from "@inertiajs/vue3";
import RecipeSearchForm from "@/Components/Search/RecipeSearchForm.vue";
import RecipeSearchResultCard from "@/Components/Search/RecipeSearchResultCard.vue";
const props = defineProps({
recipes: {
type: Array,
required: true
},
previousSearch: {
required: false
}
})
</script>
<template>
<Head title="Recipe Search"/>
<AuthenticatedLayout>
<template #header>
<h2 class="font-semibold text-xl text-gray-800 leading-tight">Recipes ({{ recipes.length }})</h2>
</template>
<div class="py-12 space-y-4">
<div class="max-w-7xl mx-auto">
<recipe-search-form :previous-search="props.previousSearch" />
</div>
<div class="max-w-7xl mx-auto">
<ul role="list" class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 ">
<li v-for="recipe in recipes" :key="recipe.id"
class="col-span-1 flex flex-col divide-y divide-gray-200 rounded-lg text-center">
<recipe-search-result-card :recipe="recipe"/>
</li>
</ul>
</div>
</div>
</AuthenticatedLayout>
</template>
<style scoped>
</style>