Joseph.Rawlings
7190d7a818
- Refactored select component to align with shadcn design principles. - Updated server status indicator component for consistency with shadcn style. - Modified spinner component to follow shadcn design guidelines. - Enhanced stat card component with shadcn-inspired styles. - Adjusted tab panel component to reflect shadcn design updates. - Revamped table row and table data cell components to match shadcn aesthetics. - Updated table header cell component for improved styling consistency. - Refined table component to align with shadcn design principles. - Enhanced tabs component with shadcn-inspired styles. - Updated toggle component to follow shadcn design guidelines. - Refactored tooltip component to align with shadcn design principles. - Updated server card component to reflect shadcn-inspired design.
71 lines
1.8 KiB
PHP
71 lines
1.8 KiB
PHP
{{--
|
|
Empty State Component - shadcn-style
|
|
|
|
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,
|
|
]) }}
|
|
>
|
|
@if($icon)
|
|
<div @class([
|
|
'flex items-center justify-center rounded-full bg-muted',
|
|
'mb-4 size-14' => !$compact,
|
|
'mb-3 size-10' => $compact,
|
|
])>
|
|
<x-dynamic-component
|
|
:component="$icon"
|
|
@class([
|
|
$iconClass ?? 'text-muted-foreground',
|
|
'size-7' => !$compact,
|
|
'size-5' => $compact,
|
|
])
|
|
/>
|
|
</div>
|
|
@endif
|
|
|
|
<h3 @class([
|
|
'font-semibold tracking-tight',
|
|
'text-base' => !$compact,
|
|
'text-sm' => $compact,
|
|
])>
|
|
{{ $title }}
|
|
</h3>
|
|
|
|
@if($description)
|
|
<p @class([
|
|
'text-muted-foreground max-w-sm',
|
|
'mt-1.5 text-sm' => !$compact,
|
|
'mt-1 text-xs' => $compact,
|
|
])>
|
|
{{ $description }}
|
|
</p>
|
|
@endif
|
|
|
|
@if($slot->isNotEmpty())
|
|
<div @class(['mt-4' => !$compact, 'mt-3' => $compact])>
|
|
{{ $slot }}
|
|
</div>
|
|
@endif
|
|
</div>
|