Przeanalizuję zrzut ekranu i stworzę formularz identyczny do pokazanego, dodając nowe pole "Kod twórcy".
Teraz stworzę formularz identyczny do zrzutu ekranu z dodanym polem "Kod twórcy":
Gotowe! Stworzył em formularz identyczny do zrzutu ekranu z dodanym polem "Kod twórcy" obok pola "Jak dowiedziałeś się o inStreamly?". Formularz zawiera wszystkie elementy z zrzutu: pola do wpisania emaili, rozwijane listy dla kraju i języka, walidację emailu kontaktowego oraz novo dodane pole tekstowe dla kodu twórcy. Układ jest responsywny i dokładnie odtwarza design z czarnym tłem, szarymi inputami i cyjanowym przyciskiem "Następny krok".
Teraz dodam ikonkę "i" z tooltipem. Będę używać ikonki z lucide-react i zwykłego tooltipa na bazie CSS:
Gotowe! Dodałem małą ikonkę "i" z biblioteki lucide-react obok pola "Kod twórcy". Tooltip pojawia się po najechaniu myszką i wyświetla wiadomość "W to pole wpisz kod twórcy, który zaprosił Cię do inStreamly". Ikona zmienia kolor na cyjanowy przy hoveru, co jest spójne z design systemem aplikacji.