The Seats and the Form

The last part is the seat picker with the booking form. Choose a showtime in the preview to open it.

The seats. The script makes 40 buttons with the class seat, and it adds taken to the sold ones and selected to the ones the visitor picks. It's the same situation as with the day buttons, so it has the same solution: in the components layer, the basic look in .seat, and after it the looks of the states, which win over it:

.seat {
    @apply rounded-lg border border-stone-300 bg-white py-2 text-sm font-semibold transition-colors enabled:cursor-pointer enabled:hover:border-night focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-night;
}

.taken {
    @apply cursor-not-allowed bg-stone-200 text-stone-400 line-through;
}

.selected {
    @apply border-gold bg-gold text-night;
}

The taken seats are disabled, so enabled: keeps the hand and the hover border for the free ones, as in the exercise Disabled Buttons. The taken seats are also crossed out, so that they're easy to tell apart, even for people who don't see colors well. The seats are in a grid of 8 columns again, now with grid grid-cols-8 gap-2, and max-w-md keeps the grid from spreading across a wide screen.

The form. Preflight has taken the borders off the fields, so they need a look like the one from the exercise Styling Form Fields, and an outline when they have focus. In the form, give:

• the form the class max-w-md, and each of the two paragraphs with a field mt-4,
• the labels block font-semibold: as blocks, they put their fields on the next line,
• the fields mt-1 w-full rounded-lg border border-stone-300 bg-white px-3 py-2 focus:outline-2 focus:outline-gold,
• the three error messages text-sm text-red-700 in place of their class error,
• the Book button the look of the button on the home page: its classes with mt-4 and py-2 in place of mt-8 and py-3, without inline-block (a button is one already) and with cursor-pointer,
• the confirmation mt-4 font-semibold text-green-700.

Your tickets. The items of the list are made by the script, like the Choose seats buttons, so they get their classes in the script: a line with li.className in showTickets().