refactor(outlet): mengubah tampuilan image yang ditrampilkan dari menggunakan avatar flux ui menjadi tag img dan menyesuaikan susunan card nya

This commit is contained in:
Yoga Pangestu 2025-11-09 19:27:01 +07:00
parent ba23f88598
commit bb6c4cea8b
2 changed files with 13 additions and 10 deletions

View File

@ -102,8 +102,8 @@ public function setOutlet(Outlet $outlet)
$this->opening_hours = $outlet->openingHours
->mapWithKeys(fn ($item) => [
$item->day->value => [
'open_time' => formatTime($item->open_time),
'close_time' => formatTime($item->close_time),
'open_time' => $item->open_time ? formatTime($item->open_time) : null,
'close_time' => $item->close_time ? formatTime($item->close_time) : null,
],
])
->toArray();

View File

@ -28,14 +28,16 @@ class="text-sm">
</flux:checkbox.group>
</flux:card>
</div>
<div class="columns-1 md:columns-2 lg:columns-3 gap-6">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 items-start">
@foreach ($outlets as $outlet)
<flux:card
class="mb-6 break-inside-avoid space-y-2 transition-transform duration-300 ease-out hover:-translate-y-1 hover:shadow-lg">
class="space-y-2 transition-transform duration-300 ease-out hover:-translate-y-1 hover:shadow-lg">
<div class="flex items-start justify-between mb-4">
<div class="flex items-center gap-3">
<flux:avatar size="lg" src="{{ $outlet['image'] }}"
wire:click="openImage('{{ $outlet['image'] }}')" />
<img src="{{ $outlet['image'] }}" alt="{{ $outlet['image'] }}"
class="w-12 h-12 rounded-full cursor-pointer"
wire:click="openImage('{{ $outlet['image'] }}')">
<div>
<flux:heading size="lg">{{ $outlet['name'] }}</flux:heading>
<flux:badge color="{{ $outlet['status']['color'] }}" size="sm">
@ -114,12 +116,13 @@ class="text-sm font-semibold text-gray-900 dark:text-white mb-2 flex items-cente
<flux:icon.photo class="w-4 h-4" />
Gambar
</h4>
<flux:avatar.group class="mt-6">
<div class="flex mt-6">
@foreach ($outlet['images'] as $key => $value)
<flux:avatar circle size="lg" src="{{ $value }}"
wire:click="openImage('{{ $value }}')" />
<img src="{{ $value }}" alt="{{ $value }}"
class="w-12 h-12 rounded-full -ml-3 first:ml-0 cursor-pointer"
wire:click="openImage('{{ $value }}')">
@endforeach
</flux:avatar.group>
</div>
</div>
@endif