fix(voucher): memperbaiki posisi empty data
This commit is contained in:
Yoga Pangestu
parent
91397602ec
commit
bf7c7e12f6
@ -2,72 +2,77 @@
|
||||
<flux:heading size="xl" level="1">{{ $pageTitle }}</flux:heading>
|
||||
|
||||
<div class="mt-6">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
|
||||
@forelse ($vouchers as $voucher)
|
||||
<flux:card class="p-0 relative dark:bg-zinc-700!">
|
||||
<flux:text class="text-white p-2 md:p-0 absolute top-2 right-3 z-50">x3</flux:text>
|
||||
@if (!empty($vouchers))
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
|
||||
@foreach ($vouchers as $voucher)
|
||||
<flux:card class="p-0 relative dark:bg-zinc-700!">
|
||||
<flux:text class="text-white p-2 md:p-0 absolute top-2 right-3 z-50">x3</flux:text>
|
||||
|
||||
<div class="flex flex-col sm:flex-row items-stretch sm:items-center p-3 sm:p-4 gap-3 sm:gap-0">
|
||||
<div
|
||||
class="flex-shrink-0 w-full sm:w-24 md:w-32 h-24 sm:h-24 md:h-32 bg-gradient-to-br from-emerald-600 to-emerald-700 rounded-lg flex flex-col items-center justify-center text-white relative mx-auto sm:mx-0">
|
||||
<div class="flex flex-col sm:flex-row items-stretch sm:items-center p-3 sm:p-4 gap-3 sm:gap-0">
|
||||
<div
|
||||
class="hidden sm:block absolute -right-3 top-1/2 transform -translate-y-1/2 w-6 h-6 bg-white dark:bg-zinc-700 rounded-full">
|
||||
</div>
|
||||
|
||||
<img src="{{ asset('assets/images/dark-logo.png') }}" alt="logo"
|
||||
class="h-12 sm:h-16 md:h-20">
|
||||
<flux:heading class="text-white!">{{ $voucher['name'] }}</flux:heading>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 sm:ml-4 md:ml-4">
|
||||
<div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
|
||||
<div class="flex-1 w-full sm:w-auto">
|
||||
<flux:heading class="mb-1">
|
||||
Diskon {{ $voucher['discount_amount'] }}
|
||||
{{ $voucher['is_percentage'] ? ' s/d ' . $voucher['max_discount'] : '' }}
|
||||
</flux:heading>
|
||||
|
||||
<flux:text class="mb-1">
|
||||
Min. Belanja {{ $voucher['min_purchase'] }}
|
||||
</flux:text>
|
||||
|
||||
<div x-data="{ textToCopy: '{{ $voucher['code'] }}', copied: false }"
|
||||
@click="navigator.clipboard.writeText(textToCopy); copied = true; setTimeout(() => copied = false, 2000)"
|
||||
:class="copied ? 'bg-emerald-100 dark:bg-emerald-800' :
|
||||
'bg-emerald-50 dark:bg-emerald-900'"
|
||||
class="inline-block px-2 py-1 border border-emerald-300 dark:border-emerald-700 rounded text-xs text-emerald-600 dark:text-emerald-300 font-medium my-1 cursor-pointer transition-colors">
|
||||
<span x-text="copied ? 'Copied!' : textToCopy"></span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2 text-xs sm:text-sm flex-wrap">
|
||||
<flux:text size="xs">
|
||||
Berakhir: {{ $voucher['end_date'] }}
|
||||
</flux:text>
|
||||
<flux:separator vertical class="dark:border-gray-700" />
|
||||
<flux:text size="xs" class="text-blue-400">
|
||||
S&K
|
||||
</flux:text>
|
||||
</div>
|
||||
class="flex-shrink-0 w-full sm:w-24 md:w-32 h-24 sm:h-24 md:h-32 bg-gradient-to-br from-emerald-600 to-emerald-700 rounded-lg flex flex-col items-center justify-center text-white relative mx-auto sm:mx-0">
|
||||
<div
|
||||
class="hidden sm:block absolute -right-3 top-1/2 transform -translate-y-1/2 w-6 h-6 bg-white dark:bg-zinc-700 rounded-full">
|
||||
</div>
|
||||
|
||||
<div class="w-full sm:w-auto sm:ml-2 md:ml-4 flex justify-center sm:justify-end">
|
||||
<flux:button variant="primary" color="emerald" class="w-full">Pakai</flux:button>
|
||||
<img src="{{ asset('assets/images/dark-logo.png') }}" alt="logo"
|
||||
class="h-12 sm:h-16 md:h-20">
|
||||
<flux:heading class="text-white!">{{ $voucher['name'] }}</flux:heading>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 sm:ml-4 md:ml-4">
|
||||
<div
|
||||
class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
|
||||
<div class="flex-1 w-full sm:w-auto">
|
||||
<flux:heading class="mb-1">
|
||||
Diskon {{ $voucher['discount_amount'] }}
|
||||
{{ $voucher['is_percentage'] ? ' s/d ' . $voucher['max_discount'] : '' }}
|
||||
</flux:heading>
|
||||
|
||||
<flux:text class="mb-1">
|
||||
Min. Belanja {{ $voucher['min_purchase'] }}
|
||||
</flux:text>
|
||||
|
||||
<div x-data="{ textToCopy: '{{ $voucher['code'] }}', copied: false }"
|
||||
@click="navigator.clipboard.writeText(textToCopy); copied = true; setTimeout(() => copied = false, 2000)"
|
||||
:class="copied ? 'bg-emerald-100 dark:bg-emerald-800' :
|
||||
'bg-emerald-50 dark:bg-emerald-900'"
|
||||
class="inline-block px-2 py-1 border border-emerald-300 dark:border-emerald-700 rounded text-xs text-emerald-600 dark:text-emerald-300 font-medium my-1 cursor-pointer transition-colors">
|
||||
<span x-text="copied ? 'Copied!' : textToCopy"></span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2 text-xs sm:text-sm flex-wrap">
|
||||
<flux:text size="xs">
|
||||
Berakhir: {{ $voucher['end_date'] }}
|
||||
</flux:text>
|
||||
<flux:separator vertical class="dark:border-gray-700" />
|
||||
<flux:text size="xs" class="text-blue-400">
|
||||
S&K
|
||||
</flux:text>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full sm:w-auto sm:ml-2 md:ml-4 flex justify-center sm:justify-end">
|
||||
<flux:button variant="primary" color="emerald" class="w-full">Pakai
|
||||
</flux:button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</flux:card>
|
||||
@empty
|
||||
<div class="flex justify-center flex-col">
|
||||
<dotlottie-wc src="https://lottie.host/4282c234-6d0f-4a8d-ad04-3d82f2783814/FuhTCVgPGi.lottie"
|
||||
autoplay loop style="width: 200px; height: 200px; margin: 0 auto;">
|
||||
</dotlottie-wc>
|
||||
<flux:text class="block text-center italic mt-5">
|
||||
Yahhh, sepertinya belum ada data yang tersedia.
|
||||
</flux:text>
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
</flux:card>
|
||||
@endforeach
|
||||
|
||||
</div>
|
||||
@else
|
||||
<div class="flex justify-center flex-col">
|
||||
<dotlottie-wc src="https://lottie.host/4282c234-6d0f-4a8d-ad04-3d82f2783814/FuhTCVgPGi.lottie" autoplay
|
||||
loop style="width: 200px; height: 200px; margin: 0 auto;">
|
||||
</dotlottie-wc>
|
||||
<flux:text class="block text-center italic mt-5">
|
||||
Yahhh, sepertinya belum ada data yang tersedia.
|
||||
</flux:text>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</flux:main>
|
||||
@assets
|
||||
|
||||
Loading…
Reference in New Issue
Block a user