<div>

    <div class="max-w-2xl md:mx-auto md:text-center xl:max-w-none">

        <p class="text-sm font-semibold leading-7 text-third-500  tracking-wider uppercase">Novice</p>

        <h2 class="font-display text-center mb-10 lg:mb-20 text-4xl tracking-tight md:text-5xl">

            Arhiv novic

        </h2>

        {{--            <p class="mt-6 text-lg tracking-tight text-blue-100">--}}

        {{--            </p>--}}

    </div>

    <div class="mx-auto bg-third-100 bg-opacity-5 rounded-xl pt-10 px-10 md:px-0">

        <div class="mb-10">

            <div class="flex mx-auto justify-center gap-4">

                <div>

                    <select wire:model="selectedCategory" id="category"

                            class="mt-2 block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-indigo-600 sm:text-sm sm:leading-6">

                        <option value="0">Vse kategorije</option>

                        @foreach($categories as $category)

                            <option value="{{ $category->id }}">{{ $category->name }}</option>

                        @endforeach

                    </select>

                    <div class="h1 text-red-900"> @error('categoryId'){{ $message }}@enderror </div>

                </div>

            </div>

        </div>

        <div class="mx-auto flex justify-center">

            <div class="space-y-20 mt-5">

{{--                <livewire:search-news/>--}}

                @foreach($news as $item)

                    <article

                        wire:key="{{ $item->id }}"

                        tabindex="1"

                        class="relative isolate flex flex-col gap-8 lg:flex-row hover:bg-slate-200 rounded-xl">

                        <div

                            class="relative aspect-[16/9] sm:aspect-[2/1] lg:aspect-square lg:w-56 lg:shrink-0">

                            <img

                                src="https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3603&q=80"

                                alt=""

                                class="absolute inset-0 h-full w-full rounded-2xl bg-gray-50 object-cover">

                            <div class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-gray-900/10"></div>

                        </div>

                        <div class="p-2">

                            <div class="flex items-center gap-x-4 text-xs">

                                <time datetime="2020-03-16" class="text-gray-500">

                                    {{ $item->created_at->diffForHumans() }}

                                </time>

                                <span

                                    class="relative z-10 rounded-full px-3 py-1.5 font-medium text-gray-100 hover:bg-gray-100"

                                    style="background-color: {{ $item->category->color }};">

                                        {{ $item->category->name }}

                                    </span>

                            </div>

                            <div class="group relative max-w-xl">

                                <h3 class="mt-3 text-lg font-semibold leading-6 text-gray-900 group-hover:text-gray-600">

                                    <a href="{{ route('news.show', $item ) }}">

                                        <span class="absolute inset-0"></span>

                                        {{ $item->title }}

                                    </a>

                                </h3>

                                <p class="mt-5 text-sm leading-6 text-gray-600">

                                    {{ $item->description }}

                                </p>

                            </div>

                        </div>

                    </article>

                @endforeach

            </div>

        </div>

        <div class="mx-auto max-w-2xl lg:max-w-4xl mt-20 pb-10">

            {{--            {{ $news->links() }}--}}

            {{ $news->appends(request()->query())->links() }}

        </div>

    </div>

</div>

<?php

namespace App\Livewire;

use App\Models\News;

use App\Models\NewsCategory;

use Livewire\Component;

use Livewire\WithPagination;

class NewsIndex extends Component

{

    use WithPagination;

    public int $selectedCategory;

    protected $queryString = [

        'selectedCategory',

    ];

    public function mount()

    {

        $this->selectedCategory = 0;

    }

    public function updatingSelectedCategory()

    {

        $this->resetPage();

    }

    public function render()

    {

        $categories = NewsCategory::all();

        return view('livewire.news-index', [

            'news' => News::with('category')

                ->when($this->selectedCategory && $this->selectedCategory !== 0, function ($query) use ($categories) {

                    return $query->where('id', $categories->pluck('id', 'name')->get($this->selectedCategory));

                })

                ->orderBy('id', 'desc')

                ->paginate(),

            'categories' => $categories,

        ]);

    }

}

<select wire:model="selectedCategory" id="category"

                            class="mt-2 block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-indigo-600 sm:text-sm sm:leading-6">

<select wire:model.live="selectedCategory" id="category"

                            class="mt-2 block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-indigo-600 sm:text-sm sm:leading-6">