Joseph.Rawlings
b4e2923a2c
- Changed component styles and classes to align with TailAdmin design patterns. - Updated color schemes, typography, and layout for consistency across components. - Refactored Info Row, Network Address Card, Notice Banner, Progress Bar, Resource Gauge, Section Header, Server Status, Spinner, Stat Card, and Tab Panel components. - Enhanced responsiveness and accessibility features in various components.
110 lines
5.3 KiB
PHP
110 lines
5.3 KiB
PHP
{{--
|
|
Section Header Component - TailAdmin style
|
|
|
|
Usage:
|
|
<x-proxmox::ui.section-header title="Section Title" />
|
|
<x-proxmox::ui.section-header title="Title" subtitle="Subtitle" icon="ri-server-line">
|
|
<x-slot:actions>
|
|
<x-proxmox::ui.button>Action</x-proxmox::ui.button>
|
|
</x-slot:actions>
|
|
</x-proxmox::ui.section-header>
|
|
--}}
|
|
|
|
@props([
|
|
'title',
|
|
'subtitle' => null,
|
|
'icon' => null,
|
|
'iconColor' => 'text-brand-500',
|
|
'actions' => null,
|
|
'helpText' => null,
|
|
'size' => 'lg',
|
|
])
|
|
|
|
@php
|
|
$titleSizes = [
|
|
'sm' => 'text-base font-semibold',
|
|
'md' => 'text-lg font-semibold',
|
|
'lg' => 'text-xl font-semibold',
|
|
'xl' => 'text-2xl font-bold',
|
|
];
|
|
$titleClass = $titleSizes[$size] ?? $titleSizes['lg'];
|
|
@endphp
|
|
|
|
<div {{ $attributes->class(['flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between']) }}>
|
|
<div class="flex items-start gap-3.5">
|
|
@if($icon)
|
|
<div class="flex size-11 flex-shrink-0 items-center justify-center rounded-xl bg-brand-50 dark:bg-brand-500/10">
|
|
<x-dynamic-component :component="$icon" class="size-5 {{ $iconColor }} dark:text-brand-400" />
|
|
</div>
|
|
@endif
|
|
<div class="space-y-1">
|
|
<div class="flex min-w-0 items-center gap-2">
|
|
<h2 class="{{ $titleClass }} text-gray-800 dark:text-white/90">{{ $title }}</h2>
|
|
@if($helpText)
|
|
<div class="relative" x-data="{ open: false }" x-cloak>
|
|
<button
|
|
type="button"
|
|
@click="open = true"
|
|
class="text-gray-400 transition-colors duration-150 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300"
|
|
>
|
|
<x-ri-question-line class="size-4.5" />
|
|
</button>
|
|
{{-- Help Modal --}}
|
|
<div
|
|
x-show="open"
|
|
x-transition:enter="transition ease-out duration-200"
|
|
x-transition:enter-start="opacity-0"
|
|
x-transition:enter-end="opacity-100"
|
|
x-transition:leave="transition ease-in duration-150"
|
|
x-transition:leave-start="opacity-100"
|
|
x-transition:leave-end="opacity-0"
|
|
@click="open = false"
|
|
@keydown.escape.window="open = false"
|
|
class="fixed inset-0 z-99999 bg-gray-900/50 backdrop-blur-sm dark:bg-gray-900/80"
|
|
style="display: none;"
|
|
></div>
|
|
<div
|
|
x-show="open"
|
|
x-transition:enter="transition ease-out duration-200"
|
|
x-transition:enter-start="opacity-0 scale-95"
|
|
x-transition:enter-end="opacity-100 scale-100"
|
|
x-transition:leave="transition ease-in duration-150"
|
|
x-transition:leave-start="opacity-100 scale-100"
|
|
x-transition:leave-end="opacity-0 scale-95"
|
|
@click.away="open = false"
|
|
class="fixed inset-0 z-99999 flex items-center justify-center p-4"
|
|
style="display: none;"
|
|
>
|
|
<div class="relative max-h-[90vh] w-full max-w-lg overflow-y-auto rounded-2xl border border-gray-200 bg-white p-6 shadow-theme-lg dark:border-gray-800 dark:bg-gray-900">
|
|
<button @click="open = false" class="absolute right-4 top-4 flex size-9 items-center justify-center rounded-lg text-gray-500 transition-colors duration-150 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300">
|
|
<x-ri-close-line class="size-5" />
|
|
</button>
|
|
<div class="mb-5 flex items-center gap-3.5 pr-8">
|
|
@if($icon)
|
|
<div class="flex size-11 items-center justify-center rounded-xl bg-brand-50 dark:bg-brand-500/10">
|
|
<x-dynamic-component :component="$icon" class="size-5 {{ $iconColor }} dark:text-brand-400" />
|
|
</div>
|
|
@endif
|
|
<h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">{{ $title }}</h3>
|
|
</div>
|
|
<div class="text-theme-sm text-gray-500 dark:text-gray-400">
|
|
{{ $helpText }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
@if($subtitle)
|
|
<p class="text-theme-sm text-gray-500 dark:text-gray-400">{{ $subtitle }}</p>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
@if($actions)
|
|
<div class="flex flex-shrink-0 items-center gap-3">
|
|
{{ $actions }}
|
|
</div>
|
|
@endif
|
|
</div>
|