Do the search

2026-01-19 12:55:19 +00:00 · 2024-06-22 16:54:14 +01:00
parent fadb1bc00a
commit 01002b31a7
10 changed files with 262 additions and 7 deletions
--- a/resources/js/Pages/Search/Recipes.vue
+++ b/resources/js/Pages/Search/Recipes.vue
@@ -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>