Места и форма

Последняя часть — выбор мест с формой бронирования. Выберите сеанс в окне просмотра, чтобы открыть её.

Места. Скрипт создаёт 40 кнопок с классом seat, добавляет taken проданным местам и selected тем, которые выбирает посетитель. Ситуация та же, что с кнопками дней, и решение то же: в слое components основной вид в .seat, а после него — виды состояний, которые его перебивают:

.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;
}

Занятые места отключены, поэтому enabled: оставляет курсор-руку и рамку при наведении только свободным местам, как в упражнении «Отключённые кнопки». Занятые места ещё и зачёркнуты, чтобы их было легко отличить, в том числе тем, кто плохо различает цвета. Места снова лежат в сетке из 8 столбцов, теперь с grid grid-cols-8 gap-2, а max-w-md не даёт сетке растягиваться на широком экране.

Форма. Preflight убрал у полей рамки, поэтому им нужен вид, как в упражнении «Оформление полей формы», и контур при фокусе. В форме задайте:

• form — класс max-w-md, а каждому из двух абзацев с полем — mt-4,
• меткам — block font-semibold: будучи блоками, они переносят свои поля на следующую строку,
• полям — mt-1 w-full rounded-lg border border-stone-300 bg-white px-3 py-2 focus:outline-2 focus:outline-gold,
• трём сообщениям об ошибках — text-sm text-red-700 вместо их класса error,
• кнопке «Забронировать» — вид кнопки с главной страницы: её классы с mt-4 и py-2 вместо mt-8 и py-3, без inline-block (кнопка и так блочно-строчный элемент) и с cursor-pointer,
• подтверждению — mt-4 font-semibold text-green-700.

Ваши билеты. Элементы списка создаёт скрипт, как и кнопки «Выбрать места», поэтому классы они получают в скрипте: строкой с li.className в showTickets().