35 lines
2.3 KiB
PHP
35 lines
2.3 KiB
PHP
|
@props(['product'])
|
||
|
|
|
||
|
|
@php
|
||
|
|
$alternatives = $product->alternatives();
|
||
|
|
@endphp
|
||
|
|
|
||
|
|
@if($alternatives->isNotEmpty())
|
||
|
|
<div data-alternatives {{ $attributes->class('bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6 mb-6') }}>
|
||
|
|
<h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Alternatives</h2>
|
||
|
|
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
||
|
|
@foreach($alternatives as $alt)
|
||
|
|
<div class="rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
|
||
|
|
<a href="{{ route('products.show', $alt) }}" class="block aspect-video bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-600">
|
||
|
|
@if($alt->thumbnail_url)
|
||
|
|
<img src="{{ $alt->thumbnail_url }}" alt="{{ $alt->title }}" class="w-full h-full object-cover" loading="lazy">
|
||
|
|
@else
|
||
|
|
<div class="w-full h-full flex items-center justify-center">
|
||
|
|
<svg class="h-10 w-10 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
@endif
|
||
|
|
</a>
|
||
|
|
<div class="p-3">
|
||
|
|
<a href="{{ route('products.show', $alt) }}" class="font-semibold text-gray-900 dark:text-white hover:text-primary-600">{{ $alt->title }}</a>
|
||
|
|
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">{{ \Illuminate\Support\Str::limit($alt->description, 80) }}</p>
|
||
|
|
<x-product.badges :product="$alt" class="mt-2" />
|
||
|
|
<p class="mt-2 text-xs text-gray-500 dark:text-gray-400">{{ $alt->shared_tags_count }} shared {{ \Illuminate\Support\Str::plural('tag', $alt->shared_tags_count) }}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
@endforeach
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
@endif
|