Make button inside ternary operator?

Hello!

I have this code:

i have this code snippet:

              <div class="block relative timeslot timeslot{{ $hour->hour }} text-center"
                   data-value="{{ $hour->hour->toDateTimeString() }}">
                  <div class="z-40">
                      {{ $hour->hour->format('H:i') }}
                      <button onclick="openForm(event)"
                          @class([
                              "flex justify-center text-center bg-green-500  w-full h-12",
                              $bookings->some(fn ($booking) => $booking->isHourBooked($hour->hour)) ? 'RedInfoButton bg-red-600 cursor-not-allowed' : ''
                          ])>{{ $bookings->some(fn ($booking) => $booking->isHourBooked($hour->hour)) ? 'BUTTON HERE' : 'Open', }}

                      </button>
                  </div>

I want there to be a button where is says "BUTTON HERE" - what would be the best approach to do that? I have tried with some JS but i am not satisfied so far.

Snapey

1 year ago

Best Answer

Level 122

<div class="block relative timeslot timeslot{{ $hour->hour }} text-center"
        data-value="{{ $hour->hour->toDateTimeString() }}">
    <div class="z-40">{{ $hour->hour->format('H:i') }}
        <button onclick="openForm(event)"
            class="flex justify-center text-center w-full h-12
            {{ $booking->isHourBooked ? 'RedInfoButton bg-red-600 cursor-not-allowed' : 'bg-green-500' }}">
            @if($booking->isHourBooked($hour->hour))
              Your Button
            @else 
                Open
            @endif
        </button>
    </div>
</div>

JazzMaster

1 year ago

Level 1

This works perfectly! I did not know that it was possible to put this: {{ $booking->isHourBooked ? 'RedInfoButton bg-red-600 cursor-not-allowed' : 'bg-green-500' }}

directly inside the class. I thought that i @class was required. Thank you Snapey!

Please or to participate in this conversation.