mirror of
https://github.com/tiennm99/coolify.git
synced 2026-08-20 04:23:34 +00:00
Andras Bacsai
5de6f97256
Extract application/database/service configuration sidebars and unified headings; improve clone-to-environment, embedded deployments, storage actions, OAuth icons, terminal, and shared form components.
79 lines
2.6 KiB
PHP
79 lines
2.6 KiB
PHP
@props([
|
|
'title',
|
|
'description' => null,
|
|
'size' => 'base', // sm | base | lg
|
|
'iconName' => null, // reicon name; use with icon-name="…"
|
|
])
|
|
|
|
@php
|
|
$minHeight = match ($size) {
|
|
'sm' => 'min-h-44',
|
|
'lg' => 'min-h-96',
|
|
default => 'min-h-80',
|
|
};
|
|
|
|
$iconBox = match ($size) {
|
|
'sm' => 'mb-3 size-10',
|
|
'lg' => 'mb-4 size-12',
|
|
default => 'mb-4 size-11',
|
|
};
|
|
|
|
$iconSize = match ($size) {
|
|
'sm' => 'size-4.5',
|
|
'lg' => 'size-6',
|
|
default => 'size-5',
|
|
};
|
|
|
|
$titleClass = match ($size) {
|
|
'sm' => 'text-[14px] font-semibold text-black dark:text-fg',
|
|
'lg' => 'text-base font-semibold text-black dark:text-fg',
|
|
default => 'text-[15px] font-semibold text-black dark:text-fg',
|
|
};
|
|
|
|
$descriptionClass = match ($size) {
|
|
'sm' => 'mt-1 max-w-sm text-[12px] leading-5 text-neutral-500 dark:text-fg-dim',
|
|
default => 'mt-1 max-w-sm text-[13px] leading-5 text-neutral-500 dark:text-fg-dim',
|
|
};
|
|
|
|
$hasIconSlot = isset($icon) && $icon instanceof \Illuminate\View\ComponentSlot && ! $icon->isEmpty();
|
|
$hasIconName = filled($iconName);
|
|
$hasIcon = $hasIconSlot || $hasIconName;
|
|
|
|
// Prefer contents; fall back to actions (legacy slot name used in several views).
|
|
$footer = null;
|
|
if (isset($contents) && $contents instanceof \Illuminate\View\ComponentSlot && ! $contents->isEmpty()) {
|
|
$footer = $contents;
|
|
} elseif (isset($actions) && $actions instanceof \Illuminate\View\ComponentSlot && ! $actions->isEmpty()) {
|
|
$footer = $actions;
|
|
}
|
|
@endphp
|
|
|
|
{{-- Empty state: dashed card, icon badge, title, description, optional actions. --}}
|
|
<div
|
|
{{ $attributes->merge([
|
|
'class' => "empty-state flex w-full flex-col items-center justify-center rounded-xl border border-dashed border-neutral-300 px-6 py-10 text-center dark:border-white/[0.1] {$minHeight}",
|
|
]) }}>
|
|
@if ($hasIcon)
|
|
<div
|
|
class="{{ $iconBox }} flex items-center justify-center rounded-xl border border-neutral-200 bg-white text-neutral-400 shadow-sm dark:border-white/[0.08] dark:bg-white/[0.035] dark:text-fg-faint">
|
|
@if ($hasIconSlot)
|
|
{{ $icon }}
|
|
@else
|
|
<x-reicon :name="$iconName" class="{{ $iconSize }}" />
|
|
@endif
|
|
</div>
|
|
@endif
|
|
|
|
<h2 class="{{ $titleClass }}">{{ $title }}</h2>
|
|
|
|
@if ($description)
|
|
<p class="{{ $descriptionClass }}">{{ $description }}</p>
|
|
@endif
|
|
|
|
@if ($footer)
|
|
<div class="mt-4 flex flex-wrap items-center justify-center gap-2">
|
|
{{ $footer }}
|
|
</div>
|
|
@endif
|
|
</div>
|