From 003c58544f7e0911cefbdcb2a4039fdee143829c Mon Sep 17 00:00:00 2001
From: Rico van Zelst <ricovzelst@pm.me>
Date: Wed, 8 Nov 2023 15:00:43 +0100
Subject: [PATCH] feat: skin list on champion details

---
 .../components/champions/grid_info.blade.php  | 21 +++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/resources/views/components/champions/grid_info.blade.php b/resources/views/components/champions/grid_info.blade.php
index 3b1b234..431db71 100644
--- a/resources/views/components/champions/grid_info.blade.php
+++ b/resources/views/components/champions/grid_info.blade.php
@@ -111,12 +111,21 @@
                 style="--tw-shadow-color:{{$champion->splash_color}}; --tw-shadow: var(--tw-shadow-colored); background-color: {{$champion->splash_color}};">
                 <div class="p-4">
                     <h4 class="text-center text-xl font-semibold text-neutral-100 uppercase mt-2.5 shadow-sm">
-                        {{$champion->name}} Skins</h4>
-                    <div class="overflow-x-scroll">
-                        {{dd($champion->skins)}}}
-                        @foreach($champion->skins as $skin)
-                            e
-                        @endforeach
+                        {{$champion->name}} Skins ({{count($champion->skins)}}) </h4>
+                    <div class="overflow-x-scroll mt-2.5">
+                        <div class="grid grid-flow-col grid-rows-2 w-max gap-4 mb-2.5">
+                            @foreach($champion->skins as $key => $skin)
+                                <div class="flex flex-col">
+                                    <img
+                                        src="//wsrv.nl/?url={{ $skin->getSkinImageAttribute() }}&w=450&output=webp&q=70"
+                                        alt="{{$champion->name}} {{$skin->name}} Splash Art"
+                                        @if($key < 6) loading="eager" @else loading="lazy" @endif
+                                        class="inline-block h-36 object-cover rounded-2xl shadow-md border border-3 border-white/10
+                                hover:shadow-orange-500/20 transition-all duration-700 mr-2.5">
+                                    <p class="text-center text-neutral-100 text-sm mt-1.5">{{$skin->skin_name}}</p>
+                                </div>
+                            @endforeach
+                        </div>
                     </div>
                 </div>
             </div>