Turn blog pagination links into visual arrow buttons

The next/previous links on the blog index were small, low-emphasis text
links. Restyle them as pill buttons with directional arrows, a subtle
border and background, and a hover animation that nudges the button and
slides the arrow. Add a test asserting the Next pagination link renders
when more pages exist.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_012aAC5we9B72tDs5UcXTLVe

Author: claude

resources/views/blog.blade.php

@@ -157,12 +157,15 @@ class="flex items-center justify-between gap-5 pt-2.5"
                     @if (! $articles->onFirstPage())
                         <a
                             href="{{ $articles->previousPageUrl() }}"
-                            class="inline-block p-1.5 opacity-60 transition duration-200 hover:opacity-100"
+                            class="group inline-flex items-center gap-2 rounded-full border border-black/10 bg-black/[0.02] py-2 pr-4 pl-3 text-sm opacity-80 transition duration-200 hover:-translate-x-0.5 hover:border-black/20 hover:bg-black/5 hover:opacity-100 dark:border-white/10 dark:bg-white/[0.02] dark:hover:border-white/20 dark:hover:bg-white/5"
                             aria-label="Go to previous page"
                             rel="prev"
                         >
-                            <span class="sr-only">Navigate to</span>
-                            Previous
+                            <x-icons.right-arrow
+                                class="size-3.5 shrink-0 -scale-x-100 transition-transform duration-200 group-hover:-translate-x-0.5"
+                                aria-hidden="true"
+                            />
+                            <span>Previous</span>
                         </a>
                     @endif
                 </div>
@@ -191,12 +194,15 @@ class="inline-block p-1.5 opacity-60 transition duration-200 hover:opacity-100"
                     @if (! $articles->onLastPage())
                         <a
                             href="{{ $articles->nextPageUrl() }}"
-                            class="inline-block p-1.5 opacity-80 transition duration-200 hover:opacity-100"
+                            class="group inline-flex items-center gap-2 rounded-full border border-black/10 bg-black/[0.02] py-2 pr-3 pl-4 text-sm opacity-80 transition duration-200 hover:translate-x-0.5 hover:border-black/20 hover:bg-black/5 hover:opacity-100 dark:border-white/10 dark:bg-white/[0.02] dark:hover:border-white/20 dark:hover:bg-white/5"
                             aria-label="Go to next page"
                             rel="next"
                         >
-                            <span class="sr-only">Navigate to</span>
-                            Next
+                            <span>Next</span>
+                            <x-icons.right-arrow
+                                class="size-3.5 shrink-0 transition-transform duration-200 group-hover:translate-x-0.5"
+                                aria-hidden="true"
+                            />
                         </a>
                     @endif
                 </div>

tests/Feature/BlogTest.php

@@ -48,6 +48,17 @@ public function published_articles_are_shown_in_antichronological_order()
             ]);
     }
 
+    #[Test]
+    public function the_blog_listing_renders_a_next_pagination_button_when_there_are_more_pages()
+    {
+        Article::factory()->count(7)->published()->create();
+
+        $this->get(route('blog'))
+            ->assertOk()
+            ->assertSee('Next')
+            ->assertSee('page=2');
+    }
+
     #[Test]
     public function scheduled_articles_are_not_shown_on_the_blog_listing()
     {