Files
gamelog/resources/views/components/game-card.blade.php
T

39 lines
2.1 KiB
PHP

@props(['game'])
<a href="{{ route('games.show', $game) }}"
class="group block bg-[#16161d] rounded-lg overflow-hidden hover:ring-1 hover:ring-purple-500 transition-all duration-200">
<!-- Cover -->
<div class="aspect-[3/4] bg-[#0f0f13] overflow-hidden">
@if($game->cover_thumb_url)
<img src="{{ $game->cover_thumb_url }}"
alt="{{ $game->title }}"
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
@else
<div class="w-full h-full flex items-center justify-center">
<svg class="w-12 h-12 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z"/>
</svg>
</div>
@endif
</div>
<!-- Info -->
<div class="p-3">
<h3 class="text-sm font-medium text-slate-200 group-hover:text-white truncate leading-tight">
{{ $game->title }}
</h3>
<div class="flex items-center justify-between mt-1.5">
<span class="text-xs text-slate-500">{{ $game->release_year ?? '—' }}</span>
@if($game->rating_avg)
<div class="flex items-center gap-1">
<svg class="w-3 h-3 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
</svg>
<span class="text-xs text-slate-400 font-medium">{{ number_format($game->rating_avg, 1) }}</span>
</div>
@endif
</div>
</div>
</a>