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:
parent
ba23f88598
commit
bb6c4cea8b
@ -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();
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user