68 lines
2.3 KiB
PHP
68 lines
2.3 KiB
PHP
{{--
|
|
Empty State Component - LucentUI Theme
|
|
Migrated from AdminLTE to Tailwind
|
|
|
|
Usage:
|
|
<x-proxmox::ui.empty-state title="No servers found" />
|
|
<x-proxmox::ui.empty-state
|
|
title="No servers"
|
|
description="Get started by creating your first server."
|
|
icon="ri-server-line"
|
|
>
|
|
<x-proxmox::ui.button variant="primary">Create Server</x-proxmox::ui.button>
|
|
</x-proxmox::ui.empty-state>
|
|
--}}
|
|
|
|
@props([
|
|
'title' => 'No data',
|
|
'description' => null,
|
|
'icon' => 'ri-inbox-line',
|
|
'iconClass' => null,
|
|
'compact' => false,
|
|
])
|
|
|
|
<div
|
|
{{ $attributes->class([
|
|
'flex flex-col items-center justify-center text-center',
|
|
'py-12 px-6' => !$compact,
|
|
'py-6 px-4' => $compact,
|
|
]) }}
|
|
x-data="{ loaded: false }"
|
|
x-init="setTimeout(() => loaded = true, 100)"
|
|
:class="loaded ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'"
|
|
class="transition-all duration-500 ease-out"
|
|
>
|
|
@if($icon)
|
|
<div class="flex items-center justify-center bg-background-secondary rounded-full transition-transform duration-300 hover:scale-110 empty-state-float {{ $compact ? 'size-11 mb-3' : 'size-16 mb-5' }}"
|
|
:class="loaded ? 'scale-100' : 'scale-90'"
|
|
style="transition: transform 0.5s ease-out 0.1s;">
|
|
<x-dynamic-component
|
|
:component="$icon"
|
|
class="text-base/50 {{ $iconClass ?? ($compact ? 'size-5' : 'size-8') }}"
|
|
/>
|
|
</div>
|
|
@endif
|
|
|
|
<h3 class="font-semibold text-base {{ $compact ? 'text-sm' : 'text-lg' }}"
|
|
:class="loaded ? 'opacity-100' : 'opacity-0'"
|
|
style="transition: opacity 0.4s ease-out 0.15s;">
|
|
{{ $title }}
|
|
</h3>
|
|
|
|
@if($description)
|
|
<p class="max-w-sm text-base/60 {{ $compact ? 'text-xs mt-1' : 'text-sm mt-2' }}"
|
|
:class="loaded ? 'opacity-100' : 'opacity-0'"
|
|
style="transition: opacity 0.4s ease-out 0.25s;">
|
|
{{ $description }}
|
|
</p>
|
|
@endif
|
|
|
|
@if($slot->isNotEmpty())
|
|
<div class="{{ $compact ? 'mt-3' : 'mt-5' }}"
|
|
:class="loaded ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-2'"
|
|
style="transition: all 0.4s ease-out 0.35s;">
|
|
{{ $slot }}
|
|
</div>
|
|
@endif
|
|
</div>
|