ZdenkaSkupinova / rezervace

rezervace

Úkol 4 Rozdělte již naprogramovanou větší komponentu na vícero menších komponent.

Založte nový JSX projekt pomocí npm init kodim-app@latest rezervace jsx Vytvořte složku pro komponentu BookingSummary a zkopírujte do ní následující kód: export const BookingSummary = () => { return (

Booking Summary

Hotel Lefsní Zátiší

Malohradské skály 347/21

Malohradská ves

4.65

Pokoj 2

Dvoulůžkový s dětskou přistýlkou

1 800 Kč / noc

Detail rezervace

Ćíslo: 459787-745

Pobyt: 13.6.2023 - 17.6.2026

Hosté: 2 dospělí, 1 dítě

Stravovávní: žádné

7 200 Kč

Check-in: 13.6.2023 do 18:00

Check-out: 17.6.2026 do 10:00

Doplňkové služby

Parkování: 200 Kč / noc

Snídaně: 150 Kč / noc

Wellness: Zdarma

Wifi: Zdarma na všech pokojích

Storno podmínky

Pokud zrušíte rezervaci do 14 dní před příjezdem, nebude Vám účtována žádná částka.

Pokud zrušíte rezervaci později nebo nedorazíte vůbec, bude Vám účtována částka za první noc pobytu.

); }; Zobrazte komponentu na stránce. Lehce ji nastylujte, aby se zobrazovala hezky. Můžete požádat aby to za vás udělal ChatGPT, abyste se nemuseli příliš trápit. Rozhodněte, jak rozdělit komponentu na více menších komponente. Navrhujeme vytvořit alespoň 4 různé komponenty, ze kterých pak poskládáte výslednou komponentu BookingSummary. Dejte komponentám smysluplná jména a vymyslete, jaké mají mít props.

Bonus Zkuste vymyslet strukturu JavaScriptového objektu, který bude obsahovat data pro komponentu BookingSummary a zařiďte, aby komponenta zobrazovala tato data. Jelikož ještě neumíme vytvořit vlastní API, zatím si pouze představuje, že tato data stahujete z nějakého serveru. Můžete této představe pomoct tak, že data vytvoříte na tom místě, kde byste jinak volali funkci fetch.