From f1ada2fb0118004acc1c0e89884f0a8ad5efe2d7 Mon Sep 17 00:00:00 2001
From: Rico van Zelst <ricovzelst@pm.me>
Date: Fri, 16 Feb 2024 01:57:48 +0100
Subject: [PATCH] refactor(icons): improve code readability and formatting

- Reorganized the HTML structure for better readability.
- Fixed indentation and spacing inconsistencies.
- Added missing newline after PHP opening tag.
- Updated class names to follow consistent naming conventions.
- Wrapped icon titles in anchor tags for improved accessibility.
---
 .../views/components/icons/list_all.blade.php | 43 +++++++++----------
 1 file changed, 21 insertions(+), 22 deletions(-)

diff --git a/resources/views/components/icons/list_all.blade.php b/resources/views/components/icons/list_all.blade.php
index 5328bbc..5ad77ea 100644
--- a/resources/views/components/icons/list_all.blade.php
+++ b/resources/views/components/icons/list_all.blade.php
@@ -1,44 +1,43 @@
 <?php
-/** @var App\Models\SummonerIcon $icon */ ?>
+/** @var App\Models\SummonerIcon $icon */
+?>
 
 <section class="max-w-screen-xl mx-auto mt-12">
     <h1
-        class="text-3xl font-bold text-center text-transparent uppercase sm:text-4xl
-        bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">
+        class="text-3xl font-bold text-center text-transparent uppercase sm:text-4xl bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">
         Summoner Icons</h1>
 
-    <x-icons.searchbar/>
+    <x-icons.searchbar />
 
-    <div class="container mx-auto p-4 flex items-center justify-center mt-3">
-        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-12">
+    <div class="container flex items-center justify-center p-4 mx-auto mt-3">
+        <div class="grid grid-cols-2 gap-12 md:grid-cols-3 lg:grid-cols-6">
 
-            @foreach($icons as $key => $icon)
+            @foreach ($icons as $key => $icon)
                 <div
-                    class="champ-card flex flex-col text-gray-700 bg-stone-800/40 shadow-md rounded-2xl bg-clip-border
-                    border border-stone-800 hover:border-orange-500/10 hover:shadow-orange-500/10 items-center">
+                    class="flex flex-col items-center text-gray-700 border shadow-md champ-card bg-stone-800/40 rounded-2xl bg-clip-border border-stone-800 hover:border-orange-500/10 hover:shadow-orange-500/10">
                     <div
-                        class="mx-4 overflow-hidden h-24 w-24 rounded-2xl bg-clip-border border-2 border-orange-400/40 mt-3">
-                        <img @if($key < 8) loading="eager" @else loading="lazy" @endif
-                        src="//wsrv.nl/?url={{ $icon->image }}&w=200&output=webp&q=50&il&default=ssl:wsrv.nl%2F%3Furl%3Dhttps://i.ibb.co/5s6YyvN/aaaa.png"
-                             class="object-cover w-full h-full "
-                             alt="{{ $icon->title }} Icon"
-                        />
+                        class="w-24 h-24 mx-4 mt-3 overflow-hidden border-2 rounded-2xl bg-clip-border border-orange-400/40">
+                        <a href="/icon/{{ $icon->slug }}">
+                            <img @if ($key < 8) loading="eager" @else loading="lazy" @endif
+                                src="//wsrv.nl/?url={{ $icon->image }}&w=200&output=webp&q=50&il&default=ssl:wsrv.nl%2F%3Furl%3Dhttps://i.ibb.co/5s6YyvN/aaaa.png"
+                                class="object-cover w-full h-full " alt="{{ $icon->title }} Icon" /></a>
                     </div>
 
                     <div class="px-4 py-2">
                         <div class="flex items-center justify-between">
-                            <p class="block text-sm antialiased font-medium text-gray-100 text-center">
-                                {{ $icon->title }}
+                            <p class="block text-sm antialiased font-medium text-center text-gray-100">
+                                <a href="/icon/{{ $icon->slug }}">
+                                    {{ $icon->title }}
+                                </a>
                             </p>
 
                         </div>
                     </div>
 
-                    <div
-                        class="mb-2 px-4 flex justify-center items-end text-white text-2xl md:text-lg mt-auto">
-                        <p class="font-medium text-sm hover:text-orange-400 "><a
-                                href="/icon/{{$icon->slug}}">More details
-                                <x-iconsax-bul-arrow-circle-right class="inline-block w-6"/>
+                    <div class="flex items-end justify-center px-4 mt-auto mb-2 text-2xl text-white md:text-lg">
+                        <p class="text-sm font-medium hover:text-orange-400 "><a href="/icon/{{ $icon->slug }}">More
+                                details
+                                <x-iconsax-bul-arrow-circle-right class="inline-block w-6" />
                             </a>
                         </p>
                     </div>