41 lines
1.6 KiB
PHP
41 lines
1.6 KiB
PHP
@props([
|
|
'title' => null,
|
|
'subtitle' => null,
|
|
])
|
|
|
|
{{-- A settings panel: one card, a header that names it, a body of rows, and an
|
|
optional footer for whatever finishes the group.
|
|
|
|
The page was a heap of cards of different heights, each holding one thing,
|
|
which produced a staircase down the screen and left half the width empty
|
|
beside it. A panel with divided rows is what every settings page worth
|
|
copying does — the group is the card, the settings are its rows, and the
|
|
rhythm comes from the dividers rather than from the gaps between boxes. --}}
|
|
<section {{ $attributes->merge(['class' => 'overflow-hidden rounded-lg border border-line bg-surface shadow-xs']) }}>
|
|
@if ($title || isset($header))
|
|
<div class="flex flex-wrap items-start justify-between gap-3 border-b border-line px-6 py-4">
|
|
@isset($header)
|
|
{{ $header }}
|
|
@else
|
|
<div class="min-w-0">
|
|
<h2 class="text-sm font-bold text-ink">{{ $title }}</h2>
|
|
@if ($subtitle)
|
|
<p class="mt-0.5 max-w-[76ch] text-sm leading-relaxed text-muted">{{ $subtitle }}</p>
|
|
@endif
|
|
</div>
|
|
@isset($action)
|
|
<div class="shrink-0">{{ $action }}</div>
|
|
@endisset
|
|
@endisset
|
|
</div>
|
|
@endif
|
|
|
|
<div class="divide-y divide-line">{{ $slot }}</div>
|
|
|
|
@isset($footer)
|
|
<div class="flex flex-wrap items-center justify-end gap-3 border-t border-line bg-surface-2 px-6 py-4">
|
|
{{ $footer }}
|
|
</div>
|
|
@endisset
|
|
</section>
|