Kevin Adametz
feda8be4d3
Component minimal-additiv erweitert (Defaults unveraendert): - size=sm (28px) fuer legal-requests/show - description-width=720px fuer breite Fliesstexte Umgestellt (letzter grosser Batch): - payments/index, payments/plans (720px, Aktionen) - invoices/index, coupons/index (720px, Badge via :meta, keine Aktionen) - legal-requests/index (Standard), legal-requests/show (sm, Status-Badge) - reports/slow-requests (Logdatei-Zaehler-Badge als Aktion) - newsletter/sync (Sync-Status via :meta, Dry-Run/Test-Sync-Buttons) CSS-Hash unveraendert -> keine neuen Klassen. 74 Tests gruen. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
72 lines
2.5 KiB
PHP
72 lines
2.5 KiB
PHP
@props([
|
||
/** Seitentitel (H1). Bereits übersetzt übergeben: :title="__('…')" */
|
||
'title' => '',
|
||
|
||
/** Eyebrow-Text rechts neben dem Hub-Badge, z. B. "Administration · Kategorien" */
|
||
'eyebrow' => '',
|
||
|
||
/** Label des Hub-Badges links oben (Standard: Admin Backend) */
|
||
'badge' => 'Admin Backend',
|
||
|
||
/** Optionaler Beschreibungstext unter dem Titel */
|
||
'description' => '',
|
||
|
||
/**
|
||
* Titel-Größe: sm (28px) | md (Standard, 30px) | lg (Landing/Hero-Listen, 34px).
|
||
* lg vergrößert zusätzlich die Beschreibung und den Button-Abstand.
|
||
*/
|
||
'size' => 'md',
|
||
|
||
/** Maximale Breite der Beschreibung: 640px (Standard) | 720px (breite Fließtexte) */
|
||
'descriptionWidth' => '640px',
|
||
])
|
||
|
||
@php
|
||
$size = in_array($size, ['sm', 'md', 'lg'], true) ? $size : 'md';
|
||
$titleClass = match ($size) {
|
||
'sm' => 'text-[28px] tracking-[-0.5px] leading-[1.15]',
|
||
'lg' => 'text-[34px] tracking-[-0.7px] leading-[1.1]',
|
||
default => 'text-[30px] tracking-[-0.6px] leading-[1.15]',
|
||
};
|
||
$descriptionClass = $size === 'lg' ? 'text-[13.5px]' : 'text-[13px]';
|
||
$descriptionMaxWidth = $descriptionWidth === '720px' ? 'max-w-[720px]' : 'max-w-[640px]';
|
||
$actionsGap = $size === 'lg' ? 'gap-3' : 'gap-2';
|
||
@endphp
|
||
|
||
{{--
|
||
Einheitlicher Seitenkopf des Admin-Backends. Ersetzt den vielfach kopierten
|
||
page-header-Block. Variable Teile über Slots:
|
||
<x-slot:meta> – zusätzliche Badges hinter dem Eyebrow (ID, Zähler …)
|
||
<x-slot:actions> – Buttons rechts (Zurück, Speichern …)
|
||
--}}
|
||
<header {{ $attributes->class('page-header') }}>
|
||
<div class="min-w-0">
|
||
<div class="flex items-center gap-3 mb-3 flex-wrap">
|
||
@if (filled($badge))
|
||
<span class="badge hub dot">{{ $badge }}</span>
|
||
@endif
|
||
|
||
@if (filled($eyebrow))
|
||
<span class="eyebrow muted">{{ $eyebrow }}</span>
|
||
@endif
|
||
|
||
{{ $meta ?? '' }}
|
||
</div>
|
||
|
||
<h1 class="{{ $titleClass }} font-bold m-0 text-[color:var(--color-ink)] break-words">
|
||
{{ $title }}
|
||
</h1>
|
||
|
||
@if (filled($description))
|
||
<p class="{{ $descriptionClass }} leading-[1.55] mt-2 m-0 {{ $descriptionMaxWidth }} text-[color:var(--color-ink-2)]">
|
||
{{ $description }}
|
||
</p>
|
||
@endif
|
||
</div>
|
||
|
||
@isset($actions)
|
||
<div class="flex items-center {{ $actionsGap }} flex-shrink-0">
|
||
{{ $actions }}
|
||
</div>
|
||
@endisset
|
||
</header>
|