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
|
$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();
|
||||||
|
|||||||
@ -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
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user