Joseph.Rawlings/Virtnet.bond
Private
Public Access
1
0
Fork 0
Code Activity

refactor: update UI components to shadcn-style

Browse Source 
- 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:
Joseph.Rawlings
2025-12-17 11:47:42 -05:00
parent e7b33a2f6c
commit 7190d7a818
34 changed files with 522 additions and 565 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
extensions/Servers/Proxmox/views/components/ui/tabs.blade.php
View File

@@ -1,5 +1,5 @@
{{--
Tabs Component - TailServer Theme
Tabs Component - shadcn-style
Usage:
<x-proxmox::ui.tabs :tabs="['Overview', 'Settings', 'Logs']" active="Overview">
@@ -18,22 +18,22 @@
@php
$variantClasses = [
'default' => [
'container' => 'border-b border-neutral/15',
'tab' => 'px-4 py-3 text-sm font-medium border-b-2 -mb-px transition-all duration-200',
'active' => 'text-primary border-primary',
'inactive' => 'text-base/50 border-transparent hover:text-base hover:border-neutral/30',
'container' => 'inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',
'tab' => 'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
'active' => 'bg-background text-foreground shadow',
'inactive' => 'hover:bg-background/50 hover:text-foreground',
],
'pills' => [
'container' => 'flex gap-1.5 p-1.5 bg-neutral/5 rounded-xl border border-neutral/10',
'tab' => 'px-4 py-2 text-sm font-medium rounded-lg transition-all duration-200',
'active' => 'bg-background-secondary text-base shadow-md',
'inactive' => 'text-base/50 hover:text-base hover:bg-neutral/10',
'container' => 'inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',
'tab' => 'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium transition-all duration-150',
'active' => 'bg-background text-foreground shadow',
'inactive' => 'hover:bg-background/50 hover:text-foreground',
],
'buttons' => [
'container' => 'flex gap-2',
'tab' => 'px-4 py-2.5 text-sm font-medium rounded-xl border transition-all duration-200',
'active' => 'bg-primary text-white border-primary shadow-md shadow-primary/25',
'inactive' => 'bg-background-secondary text-base/60 border-neutral/20 hover:border-neutral/40 hover:text-base hover:shadow-sm',
'tab' => 'inline-flex items-center justify-center whitespace-nowrap rounded-md px-4 py-2 text-sm font-medium transition-colors duration-150',
'active' => 'bg-primary text-primary-foreground shadow',
'inactive' => 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
],
];
@@ -47,32 +47,30 @@
>
{{-- Tab Navigation --}}
<div class="{{ $styles['container'] }}">
<nav class="flex @if($variant === 'default') -mb-px @endif">
@foreach($tabs as $tab)
@php
$tabName = is_array($tab) ? ($tab['name'] ?? $tab['label'] ?? '') : $tab;
$tabLabel = is_array($tab) ? ($tab['label'] ?? $tab['name'] ?? '') : $tab;
$tabIcon = is_array($tab) ? ($tab['icon'] ?? null) : null;
$tabBadge = is_array($tab) ? ($tab['badge'] ?? null) : null;
@endphp
<button
type="button"
@click="activeTab = '{{ $tabName }}'"
:class="activeTab === '{{ $tabName }}' ? '{{ $styles['active'] }}' : '{{ $styles['inactive'] }}'"
class="{{ $styles['tab'] }} flex items-center gap-2"
>
@if($tabIcon)
<x-dynamic-component :component="$tabIcon" class="size-4" />
@endif
<span>{{ $tabLabel }}</span>
@if($tabBadge)
<span class="px-1.5 py-0.5 text-xs font-semibold rounded-full bg-primary/10 text-primary">
{{ $tabBadge }}
</span>
@endif
</button>
@endforeach
</nav>
@foreach($tabs as $tab)
@php
$tabName = is_array($tab) ? ($tab['name'] ?? $tab['label'] ?? '') : $tab;
$tabLabel = is_array($tab) ? ($tab['label'] ?? $tab['name'] ?? '') : $tab;
$tabIcon = is_array($tab) ? ($tab['icon'] ?? null) : null;
$tabBadge = is_array($tab) ? ($tab['badge'] ?? null) : null;
@endphp
<button
type="button"
@click="activeTab = '{{ $tabName }}'"
:class="activeTab === '{{ $tabName }}' ? '{{ $styles['active'] }}' : '{{ $styles['inactive'] }}'"
class="{{ $styles['tab'] }} gap-2"
>
@if($tabIcon)
<x-dynamic-component :component="$tabIcon" class="size-4" />
@endif
<span>{{ $tabLabel }}</span>
@if($tabBadge)
<span class="ml-1.5 rounded-full bg-primary/10 px-1.5 py-0.5 text-xs font-medium text-primary">
{{ $tabBadge }}
</span>
@endif
</button>
@endforeach
</div>
{{-- Tab Panels --}}