Místa a formulář

Poslední část je výběr míst s rezervačním formulářem. Otevřete ho tak, že v náhledu zvolíte představení.

Místa. Skript vytvoří 40 tlačítek se třídou misto, prodaným přidá obsazene a těm, která si návštěvník vybere, vybrane. Je to stejná situace jako u tlačítek dnů, takže má i stejné řešení: ve vrstvě components základní vzhled v .misto a za ním vzhled stavů, který nad ním vyhraje:

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

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

.vybrane {
    @apply border-zlata bg-zlata text-noc;
}

Obsazená místa jsou neaktivní, takže enabled: nechá ruku a rámeček při najetí myší jen volným místům, jako ve cvičení Neaktivní tlačítka. Obsazená místa jsou navíc přeškrtnutá, aby se dala snadno rozeznat, i když někdo špatně rozlišuje barvy. Místa jsou zase v mřížce s 8 sloupci, teď se třídami grid grid-cols-8 gap-2, a max-w-md mřížce nedovolí roztáhnout se přes širokou obrazovku.

Formulář. Preflight polím vzal rámečky, takže potřebují vzhled jako ve cvičení Vzhled formulářových polí a obrys, když mají fokus. Ve formuláři dejte:

• form třídu max-w-md a každému ze dvou odstavců s polem mt-4,
• popiskům (label) block font-semibold: jako bloky posunou svá pole na další řádek,
• polím mt-1 w-full rounded-lg border border-stone-300 bg-white px-3 py-2 focus:outline-2 focus:outline-zlata,
• třem chybovým hláškám místo třídy chyba třídy text-sm text-red-700,
• tlačítku Rezervovat vzhled tlačítka z úvodní stránky: jeho třídy s mt-4 a py-2 místo mt-8 a py-3, bez inline-block (tlačítko už ho má) a navíc s cursor-pointer,
• potvrzení mt-4 font-semibold text-green-700.

Vaše vstupenky. Položky seznamu vytváří skript, stejně jako tlačítka Vybrat místa, takže třídy dostanou ve skriptu: řádkem s li.className ve funkci zobrazVstupenky().