generated from boboko/starter
35 lines
1.2 KiB
PHP
35 lines
1.2 KiB
PHP
@props([
|
|
'name' => '',
|
|
'price' => null,
|
|
'image' => null,
|
|
'href' => '#',
|
|
])
|
|
|
|
<div class="group relative">
|
|
<a href="{{ $href }}" class="block border border-black overflow-hidden bg-white mb-4 relative -z-1">
|
|
@if($image)
|
|
<img
|
|
src="{{ $image }}"
|
|
alt="{{ $name }}"
|
|
loading="lazy"
|
|
class="w-full h-auto block"
|
|
>
|
|
@else
|
|
<div class="w-full aspect-square bg-neutral-300 flex items-center justify-center text-neutral-500 text-sm">
|
|
Χωρίς εικόνα
|
|
</div>
|
|
@endif
|
|
</a>
|
|
|
|
<div class="absolute inset-x-0 top-0 bottom-[calc(theme(spacing.4)+1.5rem+0.25rem)] flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-100 ">
|
|
<x-ui.button size="md">Προσθήκη στο καλάθι</x-ui.button>
|
|
</div>
|
|
|
|
<div class="flex items-baseline justify-between gap-4">
|
|
<a href="{{ $href }}" class="font-bold text-xl leading-snug hover:text-brand">{{ $name }}</a>
|
|
@if($price !== null)
|
|
<span class="font-bold text-xl shrink-0"><x-ui.price :amount="$price" /></span>
|
|
@endif
|
|
</div>
|
|
</div>
|