BryamE
31 lines
1.2 KiB
PHP
31 lines
1.2 KiB
PHP
@props(['href' => '#', 'title', 'description', 'price', 'image' => null])
|
|
|
|
<div class="group p-4 border border-neutral-800 rounded-xl hover:border-neon-lime hover:-translate-y-1 transition-all duration-300">
|
|
{{-- Imagen si existe --}}
|
|
@if ($image)
|
|
<img src="{{ asset('storage/' . $image) }}" alt="{{ $title }}"
|
|
class="w-full h-40 object-cover rounded mb-4">
|
|
@else
|
|
<div class="w-full h-40 bg-lime-500 flex items-center justify-center rounded mb-4">
|
|
<span class="text-neutral-900 text-md uppercase font-bold">Sin imagen</span>
|
|
</div>
|
|
@endif
|
|
|
|
{{-- Nombre --}}
|
|
<h2 class="text-lg font-semibold text-white">{{ $title }}</h2>
|
|
|
|
{{-- Descripción corta --}}
|
|
<div class="h-10 overflow-y-auto [scrollbar-width:none]">
|
|
@if (!empty($description))
|
|
<p class="text-sm text-gray-400 mt-2">{{ $description }}</p>
|
|
@endif
|
|
</div>
|
|
|
|
{{-- Precio --}}
|
|
<p class="text-white group-hover:text-neon-lime font-bold mt-3 transition-colors">${{ number_format($price, 2, ',', '.') }}</p>
|
|
|
|
{{-- Botón --}}
|
|
<a href="{{ $href }}" class="mt-4 block w-full bg-blue-500 text-white py-2 rounded-lg text-center hover:bg-blue-600">
|
|
Ver producto
|
|
</a>
|
|
</div> |