feat: Improve styling consistency in feed items grid
This commit is contained in:
parent
97ba4f1de5
commit
d7f88140d8
@ -1,37 +1,40 @@
|
|||||||
<div class="grid grid-cols-2 md:grid-cols-3 gap-5">
|
<div class="grid grid-cols-2 md:grid-cols-3 gap-5">
|
||||||
|
|
||||||
@foreach ($feeds as $feed)
|
@foreach ($feeds as $feed)
|
||||||
<div class="border rounded-xl bg-white shadow-sm hover:shadow-md transition overflow-hidden flex flex-col">
|
<div
|
||||||
|
class="border rounded-xl shadow-sm hover:shadow-md transition overflow-hidden flex flex-col
|
||||||
|
bg-white dark:bg-gray-800
|
||||||
|
border-gray-200 dark:border-gray-700">
|
||||||
|
|
||||||
<img src="{{ $feed->image }}" class="w-full h-40 object-cover">
|
<img src="{{ $feed->image }}" class="w-full h-40 object-cover">
|
||||||
|
|
||||||
<div class="p-4 flex flex-col flex-1">
|
<div class="p-4 flex flex-col flex-1">
|
||||||
|
|
||||||
<div class="text-xs text-gray-400">
|
<div class="text-xs text-gray-400 dark:text-gray-500">
|
||||||
{{ $feed->unit?->name ?? '-' }}
|
{{ $feed->unit?->name ?? '-' }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="font-semibold">
|
<div class="font-semibold text-gray-900 dark:text-gray-100">
|
||||||
{{ $feed->name }}
|
{{ $feed->name }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="font-bold text-lg mt-1">
|
<div class="font-bold text-lg mt-1 text-gray-900 dark:text-gray-100">
|
||||||
Rp {{ $feed->formatted_price }}
|
Rp {{ $feed->formatted_price }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex items-center justify-end gap-3 mt-auto">
|
<div class="flex items-center justify-end gap-3 mt-auto">
|
||||||
|
|
||||||
<a href="javascript:void(0)" wire:click="decreaseQty({{ $feed->id }})"
|
<a href="javascript:void(0)" wire:click="decreaseQty({{ $feed->id }})"
|
||||||
class="w-8 h-8 rounded-full border border-gray-200 flex items-center justify-center text-lg hover:bg-gray-50 transition-colors">
|
class="w-8 h-8 rounded-full border border-gray-200 dark:border-gray-600 flex items-center justify-center text-lg text-gray-800 dark:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
|
||||||
-
|
-
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<span class="text-sm font-bold w-6 text-center">
|
<span class="text-sm font-bold w-6 text-center text-gray-900 dark:text-gray-100">
|
||||||
{{ $this->cart[$feed->id]['qty'] ?? 0 }}
|
{{ $this->cart[$feed->id]['qty'] ?? 0 }}
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<a href="javascript:void(0)" wire:click="addFeed({{ $feed->id }})"
|
<a href="javascript:void(0)" wire:click="addFeed({{ $feed->id }})"
|
||||||
class="w-8 h-8 rounded-full flex items-center justify-center text-white text-lg transition-colors bg-teal-500 hover:bg-teal-600">
|
class="w-8 h-8 rounded-full flex items-center justify-center text-white text-lg transition-colors bg-teal-500 hover:bg-teal-600 dark:bg-teal-600 dark:hover:bg-teal-500">
|
||||||
+
|
+
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user