exercise.md

title	demand	lead	solutionAccess
Mejlík – schránka	2	Vytvořte komponentu pro zobrazování počtu nepřečtených zpráv.	lock

V tomto cvičení vytvoříme základ komponenty pro zobrazování příchozí e-mailové pošty v naší nové aplikaci jménem :i[Mejlík.cz].

1. Založte si nový JSX projekt:

   npm init kodim-app@latest mejlik jsx

2. Vytvořte komponentu Inbox, která se použije takto.

   <Inbox account="[email protected]" messages={5} />

   Komponenta bude zobrazovat e-mail uživatele a počet jeho nepřečtených zpráv. Komponentu nastylujte dle následujícího vzoru

   ::fig[Schránka]{src=assets/inbox.png size=60}

3. Použijte v komponentě podmíněný operátor tak, aby zobrazila jinou zprávu v případě, že počet nepřečtených zpráv je nula.

   ::fig[Schránka]{src=assets/inbox-empty.png size=60}

4. Upravte vaši komponentu tak, že zpráva udávající počet zpráv bude složitější JSX než pouze text. Pokud máme nepřečtené zprávy, zobrazte

   <div className="unread">Nepřečtených zpráv: 5</div>

   Pokud žádné nepřečtené zprávy nemáme, zobrazte

   <div className="no-unread">Žádné nepřečtené zprávy</div>

5. Upravte CSS styly tak, aby zpráva s třídou no-unread měla jiné stylování, například světlejší text.