work on the frontend

2026-02-08 14:13:22 +02:00
parent 89be4d4329
commit 56b593d9ca
17 changed files with 2238 additions and 424 deletions
@@ -0,0 +1,46 @@
+@props(['product'])
+
+@php
+    $isBookmarked = auth()->check() && $product->isBookmarkedBy(auth()->user());
+@endphp
+
+<div x-data="{
+    bookmarked: {{ $isBookmarked ? 'true' : 'false' }},
+    loading: false,
+    toggleBookmark() {
+        if (this.loading) return;
+        this.loading = true;
+
+        fetch('{{ route('products.bookmark', $product) }}', {
+            method: 'POST',
+            headers: {
+                'X-CSRF-TOKEN': '{{ csrf_token() }}',
+                'Content-Type': 'application/json',
+                'Accept': 'application/json',
+            },
+        })
+        .then(response => response.json())
+        .then(data => {
+            this.bookmarked = data.bookmarked;
+        })
+        .catch(error => {
+            console.error('Error:', error);
+        })
+        .finally(() => {
+            this.loading = false;
+        });
+    }
+}">
+    <button @click="toggleBookmark()"
+            :disabled="loading"
+            :title="bookmarked ? 'Remove bookmark' : 'Bookmark this product'"
+            class="text-gray-400 hover:text-primary-600 transition-colors disabled:opacity-50">
+        <svg class="h-5 w-5"
+             :class="{ 'animate-pulse': loading }"
+             :fill="bookmarked ? 'currentColor' : 'none'"
+             stroke="currentColor"
+             viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"></path>
+        </svg>
+    </button>
+</div>
@@ -0,0 +1,82 @@
+@props(['product'])
+
+<div class="card group">
+    <a href="{{ route('products.show', $product) }}" class="block">
+        <!-- Thumbnail -->
+        <div class="aspect-video bg-gradient-to-br from-gray-100 to-gray-200 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" 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 transition-colors">
+                    <h3 class="text-lg font-semibold text-gray-900 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 line-clamp-2 mb-3">
+            {{ Str::limit($product->description, 100) }}
+        </p>
+
+        <!-- Meta Information -->
+        <div class="flex items-center justify-between text-xs text-gray-500">
+            <div class="flex items-center space-x-3">
+                <!-- Category Badge -->
+                <span class="badge bg-gray-100 text-gray-700">
+                    {{ $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">
+                <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 flex items-center justify-between">
+            <a href="{{ route('products.show', $product) }}"
+               class="text-sm font-medium text-primary-600 hover:text-primary-700 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>
@@ -0,0 +1,64 @@
+@props(['product', 'size' => 'sm'])
+
+@php
+    $isUpvoted = auth()->check() && $product->isUpvotedBy(auth()->user());
+    $upvotesCount = isset($product->upvotes_count) ? $product->upvotes_count : $product->upvotes()->count();
+
+    $sizeClasses = match($size) {
+        'lg' => 'h-12 w-12 text-base',
+        'md' => 'h-10 w-10 text-sm',
+        default => 'h-8 w-8 text-xs',
+    };
+@endphp
+
+<div x-data="{
+    upvoted: {{ $isUpvoted ? 'true' : 'false' }},
+    count: {{ $upvotesCount }},
+    loading: false,
+    toggleUpvote() {
+        @guest
+            window.location.href = '{{ route('login') }}';
+            return;
+        @endguest
+
+        if (this.loading) return;
+        this.loading = true;
+
+        fetch('{{ route('products.upvote', $product) }}', {
+            method: 'POST',
+            headers: {
+                'X-CSRF-TOKEN': '{{ csrf_token() }}',
+                'Content-Type': 'application/json',
+                'Accept': 'application/json',
+            },
+        })
+        .then(response => response.json())
+        .then(data => {
+            this.upvoted = data.upvoted;
+            this.count = data.upvotes_count;
+        })
+        .catch(error => {
+            console.error('Error:', error);
+        })
+        .finally(() => {
+            this.loading = false;
+        });
+    }
+}" class="flex-shrink-0">
+    <button @click="toggleUpvote()"
+            :disabled="loading"
+            :class="{
+                'bg-primary-100 border-primary-500 text-primary-700': upvoted,
+                'bg-white border-gray-300 text-gray-700 hover:border-gray-400': !upvoted
+            }"
+            class="{{ $sizeClasses }} flex flex-col items-center justify-center border-2 rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed">
+        <svg :class="{ 'animate-bounce': loading }"
+             class="w-4 h-4"
+             fill="none"
+             stroke="currentColor"
+             viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path>
+        </svg>
+        <span class="font-semibold" x-text="count"></span>
+    </button>
+</div>