Как сделать разбивку на страницы для раздела обзоров/комментариев поста в компоненте livewire

Следующий код будет отображать обзоры для каждого сообщения и позволит пользователю сделать обзор

То, что я хочу сделать, это разбить на страницы, где обзоры/комментарии зацикливаются в компоненте.

Для начала, вот моя функция отображения PostsController для получения сообщений.

    public function show($id)
    {
        //defining out post object
        $post = Post::find($id);
        
        return view('posts.show')->with('post', $post);
    }

Далее, вот мой файл show.blade с компонентом livewire

  <!-- livewire posts component -->
  <livewire:cafe-review-section :post = "$post" />
        

Далее, вот мой компонент - компонент показывает все комментарии/отзывы к сообщению, а также форму для размещения отзыва/комментария.

<div>
    <!-- show comment form -->
    <form wire:submit.prevent = "postReview" action = " " method = "post">
        @csrf
        <textarea wire:model.defer = "cafeReview" required name = "cafeReview" id = "" cols = "30" rows = "4"
                  placeholder = "Type review here"
        ></textarea>

        @error('comment')
        <p>{{ $message }}</p>
        @enderror

        <button type = "submit" class = "btn btn-primary">
            <div  wire:loading wire:target = "postReview" class = "spinner-border" role = "status">
                <span class = "visually-hidden">Loading...</span>
            </div>
            <span>post comment</span>
        </button>
    </form>

    <!-- here is where we will display a list of comments for the post-->
    @if (count($post->cafeReviews) > 0)
        @foreach($post->cafeReviews->sortDesc() as $comm)
            <div class = "d-flex bd-highlight" style = "background-color: #FAF0E6; margin-bottom: 1%; border-radius: 20px; padding-top: 1%; padding-bottom: 2%;">
                <div class = "p-2 flex-shrink-1 bd-highlight">
                    <img style = "width: 60px; height: 60px; vertical-align: middle" src = "/css/img/user.png" alt = "avatar">
                </div>
                <div class = "p-2 w-100 bd-highlight">
                    <div class = "flex items-center">
                        <div>Posted by: <b>{{ $comm->username }}</b></div>
                        <hr>
                        <div class = "text-gray-700 mt-2">{{ $comm->content }}</div>
                    </div>
                    <div class = "d-flex" style = "margin-top: 3%; padding-right: 1%;">
                        <div class = "ms-auto">
                            {{ $comm->created_at->diffForHumans() }}
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    @else
        <p>no reviews</p>
    @endif
</div>

Далее, вот мой класс livewire

<?php

namespace App\Http\Livewire;

use App\Models\CafeReview;
use App\Models\Post;
use Livewire\Component;
use RealRashid\SweetAlert\Facades\Alert;

class CafeReviewSection extends Component
{

    public $post;

    //keeping track of review with sate
    public $cafeReview;

    //defining our validation rules
    protected $rules = ([
        'cafeReview' => 'required|min:4'
    ]);

    //we dont actually need this as livewire knows already
    public function mount(Post $post)
    {
        $this->post = $post;

    }

    public function postReview()
    {
        //validating our comment state when we submit
        sleep(1);
        $this->validate();
        
        CafeReview::create([
            'post_id' => $this->post->id,
            'user_id' => auth()->user()->id,
            'username' => auth()->user()->username,
            'content' => $this->cafeReview,
        ]);

        $this->post->refresh();

        $this->cafeReview = '';

    }

    public function render()
    {
        return view('livewire.cafe-review-section');

    }
}