86 lines
4.4 KiB
PHP
86 lines
4.4 KiB
PHP
@props(['product'])
|
|
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden hover:shadow-md transition-shadow group">
|
|
<a href="{{ route('products.show', $product) }}" class="block">
|
|
<!-- Thumbnail -->
|
|
<div class="aspect-video bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-600 overflow-hidden">
|
|
@if($product->thumbnail_url)
|
|
<img src="{{ $product->thumbnail_url }}"
|
|
alt="{{ $product->title }}"
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200"
|
|
loading="lazy">
|
|
@else
|
|
<div class="w-full h-full flex items-center justify-center">
|
|
<svg class="h-16 w-16 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
|
|
</div>
|
|
</a>
|
|
|
|
<!-- Content -->
|
|
<div class="p-4">
|
|
<div class="flex items-start justify-between mb-2">
|
|
<div class="flex-1 min-w-0">
|
|
<a href="{{ route('products.show', $product) }}" class="group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">
|
|
<h3 class="text-lg font-semibold text-gray-900 dark:text-white truncate">{{ $product->title }}</h3>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Upvote Button Component -->
|
|
@include('components.product.upvote-button', ['product' => $product])
|
|
</div>
|
|
|
|
<!-- Description -->
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 line-clamp-2 mb-3">
|
|
{{ Str::limit($product->description, 100) }}
|
|
</p>
|
|
|
|
<!-- Badges -->
|
|
<x-product.badges :product="$product" class="mb-3" />
|
|
|
|
<!-- Meta Information -->
|
|
<div class="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
|
|
<div class="flex items-center space-x-3">
|
|
<!-- Category Badge -->
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300">
|
|
{{ $product->category->name }}
|
|
</span>
|
|
|
|
<!-- Created At -->
|
|
<span class="flex items-center">
|
|
<svg class="h-3.5 w-3.5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
{{ $product->created_at->diffForHumans() }}
|
|
</span>
|
|
</div>
|
|
|
|
<!-- User -->
|
|
<a href="{{ route('profile.show', $product->user) }}" class="flex items-center space-x-1 hover:text-gray-900 dark:hover:text-white">
|
|
<div class="h-5 w-5 rounded-full bg-gradient-to-br from-primary-500 to-accent-500 flex items-center justify-center text-white text-xs font-semibold">
|
|
{{ strtoupper(substr($product->user->name, 0, 1)) }}
|
|
</div>
|
|
<span class="text-xs">{{ $product->user->name }}</span>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="mt-3 pt-3 border-t border-gray-100 dark:border-gray-700 flex items-center justify-between">
|
|
<a href="{{ route('products.show', $product) }}"
|
|
class="text-sm font-medium text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 flex items-center">
|
|
View details
|
|
<svg class="h-4 w-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
|
</svg>
|
|
</a>
|
|
|
|
<!-- Bookmark Button -->
|
|
@auth
|
|
@include('components.product.bookmark-button', ['product' => $product])
|
|
@endauth
|
|
</div>
|
|
</div>
|
|
</div>
|