Development

app/Livewire/Web/Recipes/RecipeShow.php

@@ -39,6 +39,8 @@ public function mount(Recipe $recipe): void
             'ingredients',
             'canonical.country',
             'variants.country',
+            'variants.label',
+            'variants.tags',
         ]);
 
         // Set default yield based on available yields
@@ -229,6 +231,7 @@ public function similarRecipes(): Collection
             ))
             ->withCount(['tags' => fn (Builder $query): Builder => $query->whereIn('tags.id', $tagIds)])
             ->orderByDesc('tags_count')
+            ->with(['label', 'tags', 'country'])
             ->limit(4)
             ->get();
     }

resources/views/web/components/recipes/recipe-card.blade.php

@@ -1,5 +1,5 @@
 @if ($viewMode === \App\Enums\ViewModeEnum::Grid)
-  <flux:card class="overflow-hidden group">
+  <flux:card class="flex flex-col gap-ui">
     <div class="block relative">
       @if ($recipe->card_image_url)
         <img
@@ -55,8 +55,8 @@ class="absolute bottom-2 left-2 rounded px-2 py-1 text-xs font-semibold"
       @endif
     </div>
 
-    <div class="p-4">
-      <flux:heading size="lg" class="line-clamp-1">
+    <div class="grow">
+      <flux:heading size="">
         <flux:link :href="localized_route('localized.recipes.show', ['slug' => slugify($recipe->name), 'recipe' => $recipe->id])" wire:navigate>
           {{ $recipe->name }}
         </flux:link>
@@ -66,6 +66,9 @@ class="absolute bottom-2 left-2 rounded px-2 py-1 text-xs font-semibold"
         <flux:text class="mt-1 line-clamp-2">{{ $recipe->headline }}</flux:text>
       @endif
 
+    </div>
+    <div>
+
       <div class="mt-3 flex items-center gap-4 text-sm text-zinc-500 dark:text-zinc-400">
         @if ($recipe->total_time)
           <span class="flex items-center gap-1">

resources/views/web/components/recipes/recipe-grid.blade.php

@@ -0,0 +1,7 @@
+@props(['recipes'])
+
+<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-section">
+  @foreach ($recipes as $recipe)
+    <x-recipes.recipe-card :recipe="$recipe" :view-mode="\App\Enums\ViewModeEnum::Grid" wire:key="recipe-grid-{{ $recipe->id }}" />
+  @endforeach
+</div>

resources/views/web/livewire/recipes/recipe-show.blade.php

@@ -95,34 +95,17 @@ class="rounded-full p-2 transition-colors bg-zinc-100 text-zinc-700 hover:bg-zin
       <flux:callout.heading>{{ __('Based on Canonical Recipe') }}</flux:callout.heading>
       <flux:callout.text>
         {{ __('This recipe is based on') }}
-        <flux:link :href="localized_route('localized.recipes.show', ['slug' => slugify($recipe->canonical->name ?: $recipe->canonical->getFirstTranslation('name')), 'recipe' => $recipe->canonical->id])" wire:navigate class="font-medium">
-          {{ $recipe->canonical->name ?: $recipe->canonical->getFirstTranslation('name') }}
+        <flux:link :href="localized_route('localized.recipes.show', ['slug' => slugify($recipe->canonical->name), 'recipe' => $recipe->canonical->id])" wire:navigate class="font-medium">
+          {{ $recipe->canonical->name }}
         </flux:link>
         ({{ $recipe->canonical->country->code }}).
       </flux:callout.text>
     </flux:callout>
   @endif
 
-  {{-- Variant Recipes --}}
-  @if ($recipe->variants->isNotEmpty())
-    <div class="mt-section">
-      <flux:text class="text-sm text-zinc-500 mb-ui">{{ __('Variants of this Recipe') }}</flux:text>
-      <div class="flex flex-wrap gap-ui">
-        @foreach ($recipe->variants as $variant)
-          <flux:badge size="sm" color="zinc">
-            <flux:link :href="localized_route('localized.recipes.show', ['slug' => slugify($variant->name ?: $variant->getFirstTranslation('name')), 'recipe' => $variant->id])" wire:navigate>
-              <x-flag :code="$variant->country->code" class="mr-1" />
-              {{ $variant->name ?: $variant->getFirstTranslation('name') }}
-            </flux:link>
-          </flux:badge>
-        @endforeach
-      </div>
-    </div>
-  @endif
-
   {{-- Description --}}
   @if ($recipe->description)
-    <div class="pt-section">
+    <div class="pt-ui">
       <flux:text>{{ $recipe->description }}</flux:text>
     </div>
   @endif
@@ -262,30 +245,24 @@ class="h-32 rounded object-cover shrink-0"
     </div>
   @endif
 
+  {{-- Variant Recipes --}}
+  @if ($recipe->variants->isNotEmpty())
+    <div x-data="{ open: false }" class="py-section border-t border-zinc-200 dark:border-zinc-700">
+      <button type="button" x-on:click="open = !open" class="flex items-center gap-ui w-full text-left">
+        <flux:heading size="lg">{{ __('Variants of this Recipe') }} ({{ $recipe->variants->count() }})</flux:heading>
+        <flux:icon.chevron-down class="size-5 transition-transform" x-bind:class="open && 'rotate-180'" />
+      </button>
+      <div x-show="open" x-collapse class="mt-4">
+        <x-web::recipes.recipe-grid :recipes="$recipe->variants" />
+      </div>
+    </div>
+  @endif
+
   {{-- Similar Recipes --}}
   @if ($this->similarRecipes->isNotEmpty())
     <div class="py-section border-t border-zinc-200 dark:border-zinc-700">
       <flux:heading size="lg" class="mb-4">{{ __('Similar Recipes') }}</flux:heading>
-      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-section">
-        @foreach ($this->similarRecipes as $similarRecipe)
-          <flux:card class="overflow-hidden">
-            @if ($similarRecipe->card_image_url)
-              <img
-                src="{{ $similarRecipe->card_image_url }}"
-                alt="{{ $similarRecipe->name }}"
-                class="aspect-video w-full object-cover"
-              >
-            @endif
-            <div class="p-4">
-              <flux:heading size="sm" class="line-clamp-2">
-                <flux:link :href="localized_route('localized.recipes.show', ['slug' => slugify($similarRecipe->name), 'recipe' => $similarRecipe->id])" wire:navigate>
-                  {{ $similarRecipe->name }}
-                </flux:link>
-              </flux:heading>
-            </div>
-          </flux:card>
-        @endforeach
-      </div>
+      <x-recipes.recipe-grid :recipes="$this->similarRecipes" />
     </div>
   @endif