Laravel component description optional-CodePudding

Action section $description is option but I can still the empty <p >...</p> when description is not provided what would be the best approach of hiding it?

Section title component

<div class="px-4 sm:px-6">
    <h2 class="text-lg font-medium leading-6 text-gray-900">
        {{ $title }}
    </h2>
    <p class="mt-1 text-sm text-gray-500">
        {{ $description }}
    </p>
</div>

Action section component

<div {{ $attributes->merge(['class' => 'pt-6 bg-white border sm:rounded-md sm:overflow-hidden']) }}>
    <x-section-title>
        <x-slot name="title">{{ $title }}</x-slot>
        <x-slot name="description">{{ $description ?? '' }}</x-slot>
    </x-section-title>

    <div class="flex flex-col mt-6">
        <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
            <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
                {{ $content }}
            </div>
        </div>
    </div>
</div>

CodePudding user response：

Try this:

// section-title.blade.php 
@props([
    'title',
    'description',
])

<div class="px-4 sm:px-6">
    <h2 class="text-lg font-medium leading-6 text-gray-900">
        {{ $title }}
    </h2>

    @if($description)
        <p class="mt-1 text-sm text-gray-500">
            {{ $description }}
        </p>
    @endif
</div>

// action-section.blade.php
<div {{ $attributes->merge(['class' => 'pt-6 bg-white border sm:rounded-md sm:overflow-hidden']) }}>
    <x-section-title :title="$title" :description="$description ?? ''"></x-section-title>

    <div class="flex flex-col mt-6">
        <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
            <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
                {{ $content }}
            </div>
        </div>
    </div>
</div>