refactor: update UI components to shadcn-style
- 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.
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
{{--
|
||||
Empty State Component - TailServer Theme
|
||||
Empty State Component - shadcn-style
|
||||
|
||||
Usage:
|
||||
<x-proxmox::ui.empty-state title="No servers found" />
|
||||
@@ -29,25 +29,23 @@
|
||||
>
|
||||
@if($icon)
|
||||
<div @class([
|
||||
'relative flex items-center justify-center rounded-full',
|
||||
'mb-4 w-16 h-16 bg-neutral/5' => !$compact,
|
||||
'mb-3 w-12 h-12 bg-neutral/5' => $compact,
|
||||
'flex items-center justify-center rounded-full bg-muted',
|
||||
'mb-4 size-14' => !$compact,
|
||||
'mb-3 size-10' => $compact,
|
||||
])>
|
||||
{{-- Decorative ring --}}
|
||||
<div class="absolute inset-0 rounded-full border border-dashed border-neutral/20"></div>
|
||||
<x-dynamic-component
|
||||
:component="$icon"
|
||||
@class([
|
||||
$iconClass ?? 'text-base/25',
|
||||
'size-8' => !$compact,
|
||||
'size-6' => $compact,
|
||||
$iconClass ?? 'text-muted-foreground',
|
||||
'size-7' => !$compact,
|
||||
'size-5' => $compact,
|
||||
])
|
||||
/>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<h3 @class([
|
||||
'font-semibold text-base/80',
|
||||
'font-semibold tracking-tight',
|
||||
'text-base' => !$compact,
|
||||
'text-sm' => $compact,
|
||||
])>
|
||||
@@ -56,7 +54,7 @@
|
||||
|
||||
@if($description)
|
||||
<p @class([
|
||||
'text-base/50 max-w-sm leading-relaxed',
|
||||
'text-muted-foreground max-w-sm',
|
||||
'mt-1.5 text-sm' => !$compact,
|
||||
'mt-1 text-xs' => $compact,
|
||||
])>
|
||||
@@ -65,7 +63,7 @@
|
||||
@endif
|
||||
|
||||
@if($slot->isNotEmpty())
|
||||
<div @class(['mt-5' => !$compact, 'mt-3' => $compact])>
|
||||
<div @class(['mt-4' => !$compact, 'mt-3' => $compact])>
|
||||
{{ $slot }}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
Reference in New Issue
Block a user