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 $this->opening_hours = $outlet->openingHours
->mapWithKeys(fn ($item) => [ ->mapWithKeys(fn ($item) => [
$item->day->value => [ $item->day->value => [
'open_time' => formatTime($item->open_time), 'open_time' => $item->open_time ? formatTime($item->open_time) : null,
'close_time' => formatTime($item->close_time), 'close_time' => $item->close_time ? formatTime($item->close_time) : null,
], ],
]) ])
->toArray(); ->toArray();

View File

@ -28,14 +28,16 @@ class="text-sm">
</flux:checkbox.group> </flux:checkbox.group>
</flux:card> </flux:card>
</div> </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) @foreach ($outlets as $outlet)
<flux:card <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-start justify-between mb-4">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<flux:avatar size="lg" src="{{ $outlet['image'] }}" <img src="{{ $outlet['image'] }}" alt="{{ $outlet['image'] }}"
wire:click="openImage('{{ $outlet['image'] }}')" /> class="w-12 h-12 rounded-full cursor-pointer"
wire:click="openImage('{{ $outlet['image'] }}')">
<div> <div>
<flux:heading size="lg">{{ $outlet['name'] }}</flux:heading> <flux:heading size="lg">{{ $outlet['name'] }}</flux:heading>
<flux:badge color="{{ $outlet['status']['color'] }}" size="sm"> <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" /> <flux:icon.photo class="w-4 h-4" />
Gambar Gambar
</h4> </h4>
<flux:avatar.group class="mt-6"> <div class="flex mt-6">
@foreach ($outlet['images'] as $key => $value) @foreach ($outlet['images'] as $key => $value)
<flux:avatar circle size="lg" src="{{ $value }}" <img src="{{ $value }}" alt="{{ $value }}"
wire:click="openImage('{{ $value }}')" /> class="w-12 h-12 rounded-full -ml-3 first:ml-0 cursor-pointer"
wire:click="openImage('{{ $value }}')">
@endforeach @endforeach
</flux:avatar.group> </div>
</div> </div>
@endif @endif