feat(lottie): membuat component lottie
This commit is contained in:
Yoga Pangestu
parent
d9832686ba
commit
9f78f45a93
8
resources/views/components/lottie/not-found.blade.php
Normal file
8
resources/views/components/lottie/not-found.blade.php
Normal file
@ -0,0 +1,8 @@
|
||||
<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">
|
||||
{!! isset($message) ? $message : 'Yahhh, sepertinya belum ada data yang tersedia.' !!}
|
||||
</flux:text>
|
||||
</div>
|
||||
@ -43,14 +43,7 @@ class="px-2 py-1 inline-flex text-xs font-semibold rounded-full
|
||||
</p>
|
||||
</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>
|
||||
@include('components.lottie.not-found')
|
||||
@endforelse
|
||||
</div>
|
||||
|
||||
|
||||
@ -64,14 +64,7 @@ class="inline-block px-2 py-1 border border-emerald-300 dark:border-emerald-700
|
||||
|
||||
</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>
|
||||
@include('components.lottie.not-found')
|
||||
@endif
|
||||
</div>
|
||||
</flux:main>
|
||||
|
||||
@ -15,43 +15,47 @@
|
||||
</div>
|
||||
|
||||
<div class="mt-6">
|
||||
<div class="mt-6 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
|
||||
@foreach ($formulas as $key => $formula)
|
||||
<flux:card class="space-y-2">
|
||||
<div class="mb-4 pb-3 border-b border-gray-200">
|
||||
<flux:heading size="xl" class="flex items-center gap-2">
|
||||
<flux:badge color="blue" size="lg">{{ $key }} ml</flux:badge>
|
||||
</flux:heading>
|
||||
</div>
|
||||
@foreach ($formula as $item)
|
||||
<flux:callout variant="secondary" inline>
|
||||
<div class="flex items-center space-x-1">
|
||||
<flux:callout.heading>{{ $item['quality'] }}</flux:callout.heading>
|
||||
<flux:text class="text-xs text-gray-400">({{ $item['volume'] }} ml)</flux:text>
|
||||
</div>
|
||||
@if (!empty($formulas))
|
||||
<div class="mt-6 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
|
||||
@foreach ($formulas as $key => $formula)
|
||||
<flux:card class="space-y-2">
|
||||
<div class="mb-4 pb-3 border-b border-gray-200">
|
||||
<flux:heading size="xl" class="flex items-center gap-2">
|
||||
<flux:badge color="blue" size="lg">{{ $key }} ml</flux:badge>
|
||||
</flux:heading>
|
||||
</div>
|
||||
@foreach ($formula as $item)
|
||||
<flux:callout variant="secondary" inline>
|
||||
<div class="flex items-center space-x-1">
|
||||
<flux:callout.heading>{{ $item['quality'] }}</flux:callout.heading>
|
||||
<flux:text class="text-xs text-gray-400">({{ $item['volume'] }} ml)</flux:text>
|
||||
</div>
|
||||
|
||||
<x-slot name="actions">
|
||||
<flux:modal.trigger name="form-modal">
|
||||
<flux:tooltip content="Ubah">
|
||||
<flux:button variant="primary" color="yellow" icon="pencil-square"
|
||||
size="sm"
|
||||
wire:click="$dispatch('modal:open', {method: 'update', 'modalTitle': 'Ubah Rumus', 'id': '{{ $item['hash'] }}'})">
|
||||
</flux:button>
|
||||
</flux:tooltip>
|
||||
</flux:modal.trigger>
|
||||
<flux:modal.trigger name="delete">
|
||||
<flux:tooltip content="Hapus">
|
||||
<flux:button variant="danger" icon="trash" size="sm"
|
||||
wire:click="$dispatch('fn:confirmAction', {id: '{{ $item['hash'] }}'})">
|
||||
</flux:button>
|
||||
</flux:tooltip>
|
||||
</flux:modal.trigger>
|
||||
</x-slot>
|
||||
</flux:callout>
|
||||
@endforeach
|
||||
</flux:card>
|
||||
@endforeach
|
||||
</div>
|
||||
<x-slot name="actions">
|
||||
<flux:modal.trigger name="form-modal">
|
||||
<flux:tooltip content="Ubah">
|
||||
<flux:button variant="primary" color="yellow" icon="pencil-square"
|
||||
size="sm"
|
||||
wire:click="$dispatch('modal:open', {method: 'update', 'modalTitle': 'Ubah Rumus', 'id': '{{ $item['hash'] }}'})">
|
||||
</flux:button>
|
||||
</flux:tooltip>
|
||||
</flux:modal.trigger>
|
||||
<flux:modal.trigger name="delete">
|
||||
<flux:tooltip content="Hapus">
|
||||
<flux:button variant="danger" icon="trash" size="sm"
|
||||
wire:click="$dispatch('fn:confirmAction', {id: '{{ $item['hash'] }}'})">
|
||||
</flux:button>
|
||||
</flux:tooltip>
|
||||
</flux:modal.trigger>
|
||||
</x-slot>
|
||||
</flux:callout>
|
||||
@endforeach
|
||||
</flux:card>
|
||||
@endforeach
|
||||
</div>
|
||||
@else
|
||||
@include('components.lottie.not-found')
|
||||
@endif
|
||||
</div>
|
||||
|
||||
@include('components.confirmation.delete')
|
||||
@ -102,3 +106,6 @@
|
||||
</div>
|
||||
</flux:modal>
|
||||
</flux:main>
|
||||
@assets
|
||||
<script src="https://unpkg.com/@lottiefiles/dotlottie-wc@0.8.5/dist/dotlottie-wc.js" type="module"></script>
|
||||
@endassets
|
||||
|
||||
Loading…
Reference in New Issue
Block a user