feat:(LAR-167) ajout des reaction et scroll sur article

Author: StevyMarlino

app/Livewire/Pages/Articles/Index.php

@@ -10,11 +10,14 @@
 use App\Traits\WithLocale;
 use Illuminate\Contracts\View\View;
 use Livewire\Component;
+use Livewire\WithoutUrlPagination;
+use Livewire\WithPagination;
 
 final class Index extends Component
 {
-    use WithInfiniteScroll;
     use WithLocale;
+    use WithoutUrlPagination;
+    use WithPagination;
 
     public function mount(): void
     {
@@ -31,7 +34,7 @@ public function render(): View
                 ->published()
                 ->notPinned()
                 ->forLocale($this->locale)
-                ->paginate($this->perPage),
+                ->simplePaginate(5),
             'tags' => Tag::query()->whereHas('articles', function ($query): void {
                 $query->published();
             })->orderBy('name')->get(),

resources/views/livewire/pages/articles/index.blade.php

@@ -119,11 +119,8 @@ class="flex size-8 items-center justify-center rounded-full text-gray-400 transi
             @endforeach
         </div>
 
-        @if ($articles->hasMorePages())
-            <p x-intersect="@this.call('loadMore')" class="mt-10 flex items-center justify-center gap-2">
-                <x-loader class="text-primary-600" aria-hidden="true" />
-                {{ __('global.loading') }}
-            </p>
-        @endif
+        <div class="mt-4">
+            {{ $articles->links() }}
+        </div>
     </x-container>
 </div>

resources/views/livewire/pages/articles/single-post.blade.php

@@ -108,12 +108,21 @@ class="object-cover size-full"
             </div>
 
             <div class="lg:grid lg:grid-cols-4 lg:gap-16">
-                <div class="overflow-x-hidden lg:col-span-3">
+                <div class="overflow-hidden lg:col-span-3">
                     <x-markdown-content
                         id="content"
                         class="prose prose-green text-gray-500 dark:text-gray-400 dark:prose-invert lg:max-w-none"
                         :content="$article->body"
                     />
+
+                    <div class="relative inline-flex mt-5 space-x-4">
+                        <livewire:components.reactions
+                            wire:key="{{ $article->id }}"
+                            :model="$article"
+                            :with-place-holder="false"
+                            :with-background="false"
+                        />
+                    </div>
                 </div>
                 <div class="hidden lg:block">
                     <x-sticky-content class="space-y-10">