28 lines
1.0 KiB
PHP
28 lines
1.0 KiB
PHP
@props([
|
|
'label' => null,
|
|
'hint' => null,
|
|
'for' => null,
|
|
])
|
|
|
|
{{-- One row of a settings panel: what it is on the left, the control on the
|
|
right.
|
|
|
|
The two-column shape is what uses the width. A single column of full-width
|
|
inputs on a 1240px shell leaves two thirds of the line empty and makes a
|
|
four-field form look like a questionnaire; a label column of 280px with the
|
|
control beside it reads as a settings page and fits the screen it is on.
|
|
|
|
Stacks below `sm`, because on a telephone the label belongs above its
|
|
field. --}}
|
|
<div {{ $attributes->merge(['class' => 'grid gap-x-6 gap-y-2 px-6 py-4 sm:grid-cols-[minmax(0,280px)_minmax(0,1fr)] sm:items-start']) }}>
|
|
@if ($label)
|
|
<div class="min-w-0">
|
|
<label @if ($for) for="{{ $for }}" @endif class="text-sm font-medium text-ink">{{ $label }}</label>
|
|
@if ($hint)
|
|
<p class="mt-0.5 text-xs leading-relaxed text-muted">{{ $hint }}</p>
|
|
@endif
|
|
</div>
|
|
@endif
|
|
<div class="min-w-0">{{ $slot }}</div>
|
|
</div>
|