tighten/onramp

<div class="mt-5">
    @isset($description)
        <p class="text-sm leading-5 text-gray-700 md:text-base">
            {{ $description }}
        </p>
    @endisset

    <div class="flex flex-wrap px-5 pb-2 mt-6 border border-gray-300 lg:flex-no-wrap md:px-8">
        {{ $slot }}
    </div>
</div>

@props([
    'name',
    'label',
    'value' => null,
    'type' => 'text',
])

<div class="flex-auto w-full my-5 lg:flex-even md:my-8">
    <label
        for="{{ $name }}"
        id="{{ $name }}-label"
        class="text-base font-medium text-gray-900"
    >
        {{ $label }}
    </label>

    <div class="relative max-w-xs mt-4">
        <input
            type="{{ $type }}"
            class="block w-full px-4 py-2 text-sm pr-8 leading-tight bg-white border border-gray-400 rounded shadow appearance-none hover:border-gray-500 focus:outline-none focus:shadow-outline{{ $errors->has($name) ? ' border-red-500' : '' }}"
            name="{{ $name }}"
            aria-labelledby="{{ $name }}-label"
            value="{{ old($name, $value) }}"
        >
    </div>

    @error($name)
        <p class="mt-2 text-xs italic text-red-500">
            {{ $errors->first($name) }}
        </p>
    @enderror
</div>

@props([
    'type' => 'submit',
])

<span class="inline-flex rounded-md shadow-sm">
    <button
        type="{{ $type }}"
        class="py-2 lg:text-lg button button-purple"
    >
        {{ $slot }}
    </button>
</span>

// ...

<x-form.section>
    <x-input.text
        name="name"
        :label="__('Name')"
        :value="auth()->user()->name"
    ></x-input.text>

    <x-input.text
        name="email"
        :label="__('Email')"
        :value="auth()->user()->email"
        type="email"
    ></x-input.text>
</x-form.section>

<div class="pt-5 mt-8">
    <div class="flex justify-start">
        <x-button.primary>
            {{ ucfirst(__('save')) }}
        </x-button.primary>
    </div>
</div>

// ...