feat: skin rarity color

app/Http/Controllers/ChampionSkinController.php

@@ -18,7 +18,16 @@ class ChampionSkinController extends Controller
             return ChampionSkin::orderBy('id')->paginate(16);
         });
 
-        return view('skins.index', compact('skins'));
+        $rarityColor = [
+            'Common' => 'text-stone-300',
+            'Epic' => 'text-blue-400',
+            'Legendary' => 'text-red-500',
+            'Rare' => 'text-pink-300',
+            'Mythic' => 'text-purple-500',
+            'Ultimate' => 'text-yellow-400',
+        ];
+
+        return view('skins.index', compact('skins', 'rarityColor'));
     }
 
     /**

app/View/Components/Skins/Paginatedlist.php

@@ -9,7 +9,7 @@ use Illuminate\Pagination\LengthAwarePaginator as Paginator;
 class Paginatedlist extends Component
 {
 
-    public function __construct(public Paginator $skins)
+    public function __construct(public Paginator $skins, public array $rarityColor)
     {
     }
 

resources/views/components/skins/paginatedlist.blade.php

@@ -1,7 +1,6 @@
 <?php
-/** @var App\Models\ChampionSkin $skin */
+/** @var App\Models\ChampionSkin $skin */ ?>
 
-?>
 <section class="max-w-screen-xl mx-auto mt-12">
     <h2
         class="text-3xl font-bold text-center text-transparent uppercase sm:text-4xl
@@ -17,8 +16,22 @@
                 <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">
+
+                    @if($skin->associated_skinline != null)
+                        <div class="px-2 flex justify-center">
+                            @foreach($skin->associated_skinline as $skinline)
+                                <span class="sr-only">Associated Skinline:</span>
+                                <span
+                                    class="m-2 bg-orange-100 text-orange-800 text-xs font-medium
+                                            mr-2 px-2.5 py-0.5 rounded
+                                            border border-orange-300
+                                            ">
+                                            {{$skinline}}</span>
+                            @endforeach
+                        </div>
+                    @endif
                     <div
-                        class="mx-4 mt-4 overflow-hidden h-52 rounded-2xl bg-clip-border border-2 border-orange-400/40">
+                        class="mx-4 overflow-hidden h-52 rounded-2xl bg-clip-border border-2 border-orange-400/40">
                         <img @if($key < 8) loading="eager" @else loading="lazy" @endif
                         src="//wsrv.nl/?url={{ $skin->getSkinImageAttribute() }}&w=540&output=webp&q=70&il"
                              class="object-cover w-full h-full"
@@ -31,26 +44,19 @@
                             <p class="block text-base antialiased font-medium text-gray-100">
                                 {{ $skin->skin_name }}
                             </p>
-                            <span class="text-xs text-stone-300">{{$skin->rarity}}</span>
+                            <span class="text-xs font-bold  {{ $rarityColor[$skin->rarity] }}">{{$skin->rarity}}</span>
+
                         </div>
                     </div>
-                    @if($skin->associated_skinline != null)
-                        <div class="px-4 flex justify-center">
-                            @foreach($skin->associated_skinline as $skinline)
-                                <span class="sr-only">Associated Skinline:</span>
-                                <span
-                                    class="my-2 bg-orange-100 text-orange-800 text-xs font-medium
-                                            mr-2 px-2.5 py-0.5 rounded
-                                            border border-orange-300
-                                            ">
-                                            {{$skinline}}</span>
-                            @endforeach
-                        </div>
-                    @endif
-                    <div class="mb-2 px-4 flex justify-center text-white">
-                        <p>More</p>
-                    </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="#">More details
+                                <x-iconsax-bul-arrow-circle-right class="inline-block w-6"/>
+                            </a>
+                        </p>
+                    </div>
                 </div>
             @endforeach
         </div>

resources/views/skins/index.blade.php

@@ -46,7 +46,7 @@
 
 <body class="antialiased bg-stone-900 dark scroll-smooth">
 <x-navbar/>
-<x-skins.paginatedlist :skins="$skins"/>
+<x-skins.paginatedlist :skins="$skins" :rarity-color="$rarityColor"/>
 <x-footer/>
 
 </body>

tailwind.config.js

@@ -8,6 +8,14 @@ module.exports = {
         "./resources/**/*.vue",
         "./node_modules/flowbite/**/*.js",
     ],
+    safelist: [
+        'text-stone-300',
+        'text-blue-400',
+        'text-red-500',
+        'text-pink-300',
+        'text-purple-500',
+        'text-yellow-400'
+    ],
     theme: {
         extend: {
             fontSize: {