52. Filtrar los posts por etiquetas

? 7° Actualizamos la vista principal

Para que las etiquetas nos redirijan a la vista Tag.

En /resources/views/posts/ editamos el archivo index.blade.php donde creamos los enlaces de las etiquetas:

<div>
  @foreach ($post->tags as $tag)
      <a href="{{ route('posts.tag', $tag) }}" class="inline-block px-3 h-6 
      bg-{{$tag->color}}-600 text-white rounded-full">{{ $tag->name }}</a>
  @endforeach
</div>
<h1 class="text-4xl text-white leading-8 font-bold mt-2">
  <a href="{{ route('posts.show', $post) }}">
    {{ $post->name }}
  </a>
</h1>

? 6° Creamos la vista Tag

En /resources/views/posts/ creamos el archivo tag.blade.php conteniendo el código que copiamos del archivo category.blade.php:

<x-app-layout>

  <div class="max-w-5xl mx-auto px-2 sm:px-6 lg:px-8 py-8">
    <h1 class="uppercase text-center text-3xl font-bold"
    >Etiqueta: {{ $tag->name }}</h1>

    @foreach ($posts as $post)
      <x-card-post :post="$post" />
    @endforeach

    <div class="mt-4">
      {{ $posts->links() }}
    </div>

  </div>

</x-app-layout>

? 5° Editamos el método del controlador

En el archivo PostController.php devolvemos el listado de post que corresponde a la etiqueta:

public function tag(Tag $tag)
{
	$posts = $tag->posts()->where('status', 2)->latest('id')->paginate(4);
	
	return view('posts.tag', compact('posts', 'tag'));
}

? 4° Editamos el enlace en el componente

Configuramos la etiqueta <a> en el archivo card-post.blade.php para que apunte a la nueva ruta:

@foreach ($post->tags as $tag)
	<a href="{{ route('posts.tag', $tag) }}" class="inline-block bg-gray-200 
		rounded-full px-3 py-1 text-sm text-gray-700 mr-2">{{ $tag->name }}</a>
@endforeach

? 3° Creamos el método en el controlador

Lo creamos en el archivo PostController.php:

public function tag(Tag $tag)
{
	return $tag;
}

? 2° Creamos la ruta para las etiquetas

Desde donde nos dirigiremos al listado de post por etiqueta.

Creamos la nueva ruta en el archivo web.php:

Route::get('tag/{tag}', [PostController::class, 'tag'])->name('posts.tag');

? 1° Creamos un componente de Blade para mostrar las tarjetas

De esta forma cada vez que necesitemos usar una tarjeta reutilizamos el componente.

? Creamos un componente anónimo.

Creamos la carpeta components dentro de /resources/views/ y luego dentro de ella creamos un documento Blade de nombre card-post.blade.php.

Movemos el código (el <article>) de la vista /resources/views/posts/category.blade.php donde mostramos la tarjeta.

En el componente recibimos los datos del post mediante props:

@props(['post'])
<article class="mb-8 bg-white shadow-lg rounded-lg overflow-hidden">
  <img class="w-full h-80 object-cover object-center" 
  	src="{{ Storage::url($post->image->url) }}" alt="{{ $post->name }}">

  <div class="px-6 py-4">
    <h1 class="font-bold text-xl mb-2">
      <a href="{{ route('posts.show', $post) }}">{{ $post->name }}</a>
    </h1>
    <div class="text-gray-700 text-base">
      {{ $post->stract }}
    </div>
  </div>

  <div class="px-6 pt-4 pb-2">
    @foreach ($post->tags as $tag)
    <a href="" class="inline-block bg-gray-200 rounded-full px-3 py-1 
    	text-sm text-gray-700 mr-2">{{ $tag->name }}</a>
    @endforeach
  </div>

</article>

? Llamamos al componente desde la vista category.blade.php y le pasamos el post como atributo del componente:

@foreach ($posts as $post)
	<x-card-post :post="$post" />
@endforeach