Add recipe show view

This commit is contained in:
Christopher C. Wells 2020-12-30 14:48:50 -08:00
parent 545e4c0b5e
commit 7aab49a3cb
3 changed files with 39 additions and 4 deletions

View File

@ -118,11 +118,11 @@ class RecipeController extends Controller
* Display the specified resource.
*
* @param \App\Models\Recipe $recipe
* @return \Illuminate\Http\Response
* @return \Illuminate\Contracts\View\View
*/
public function show(Recipe $recipe)
public function show(Recipe $recipe): View
{
//
return view('recipes.show')->with('recipe', $recipe);
}
/**

View File

@ -18,7 +18,10 @@
@foreach ($recipes as $recipe)
<div class="p-2 font-light rounded-lg border-2 border-gray-200">
<div class="pb-2 lowercase flex justify-between items-baseline">
<div class="text-2xl">{{ $recipe->name }}</div>
<div class="text-2xl">
<a href="{{ route('recipes.show', $recipe->id) }}"
class="text-gray-600 hover:text-gray-800">{{ $recipe->name }}</a>
</div>
</div>
<div class="grid grid-cols-2 text-sm border-t-8 border-black pt-2">
<div class="col-span-2 text-xs text-right">Amount per serving</div>

View File

@ -0,0 +1,32 @@
<x-app-layout>
<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
{{ $recipe->name }}
</h2>
</x-slot>
<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 bg-white border-b border-gray-200">
<h3 class="mb-2 font-bold">Description</h3>
<div class="text-gray-800">{{ $recipe->description }}</div>
<h3 class="mb-2 mt-4 font-bold">Ingredients</h3>
@foreach($recipe->ingredientAmounts as $ia)
<div class="flex flex-row space-x-2 mb-2">
<div>{{ $ia->amount }}</div>
@if($ia->unit)<div>{{ $ia->unit }}</div>@endif
<div>{{ $ia->ingredient->name }}</div>
</div>
@endforeach
<h3 class="mb-2 mt-4 font-bold">Steps</h3>
@foreach($recipe->steps as $step)
<div class="flex flex-row space-x-4 mb-4">
<div class="text-3xl text-gray-400 text-center">{{ $step->number }}</div>
<div class="text-2xl">{{ $step->step }}</div>
</div>
@endforeach
</div>
</div>
</div>
</div>
</x-app-layout>