Next.js 13 w Praktyce: Przycisk dodawania subskrypcji

0:00Przejdźmy teraz do sterowania naszego guzika do dodawania nowych subskrypcji.

0:04Póki co, jeżeli chodzi o logikę, zostawimy ją sobie na później.

0:08Natomiast oscylować to możemy, żeby to

0:09wyglądało podobnie jak to mamy tutaj w naszym projekcie.

0:12Czyli ten napis powinien być w środku troszeczkę napisany taką czcionką i

0:17kolorem, który jest bardziej wyblakły niż wszystkie napisy na naszej stronie.

0:21Natomiast guzik jak najbardziej powinien

0:25wychodzić na prowadzenie i przyciągać naszą uwagę.

0:28Tutaj mamy jeszcze ikonkę plusa, także zajmijmy się teraz tymi stylami.

0:33Przejdźmy do naszej przeglądarki, żeby widzieć pogląd na żywo.

0:35Sprawdzimy czy mamy odpalone naszą aplikację.

0:38Aplikacja chodzi w tle, dlatego możemy sobie przejść do edytora

0:41kodu i skupić się na tych wszystkich stylach.

0:43Tutaj zaczniemy od tego, że na pewno będziemy musieli odsunąć ten guzik od tego

0:48napisu, czyli zróbmy sobie Class name margin button na 2.

0:53Jeszcze co będziemy potrzebować to

0:54wyśrodkować ten tekst, zróbmy sobie text center no i zapiszemy to sobie.

0:58Jest jak najbardziej ok.

1:00Teraz jeżeli chodzi o nasz guzik, no to

1:03tutaj będziemy musieli troszeczkę nad tym popracować.

1:06Najpierw rysujemy go, żeby wyglądał podobnie do tego, co chcielibyśmy uzyskać.

1:10Czyli jasne i zaczynamy Tutaj chcemy, żeby

1:13na pewno tutaj chcemy mieć w środku ikonkę.

1:17Czyli możemy sobie zacząć od tego, że

1:20dodamy sobie tutaj i może być self clothing i class.

1:25Niech to będzie.

1:27Jeżeli chodzi o ikonkę to będzie i to jest nasza biblioteka Icon Line i Text 2 XL.

1:34Chcemy to troszeczkę powiększyć.

1:36Już w tym momencie powinna nam się dodać ikonka plusa.

1:40Mamy ikonkę plusa na tym guziku.

1:42Napis został wyprodukowany.

1:44Zajmijmy się teraz wyglądem tego guzika.

1:47Dlatego tutaj chcemy sobie ustawić te

1:49elementy w środku, żeby były we środku zwane flex, czyli zróbmy sobie flex.

1:54Jeżeli chodzi o Items to center

1:57jeżeli chodzi o zaokrąglenie to zrobimy sobie round i dalej mamy back desing

2:05i wybierzemy sobie 950 albo zrobimy sobie 900 nie takie ciemne

2:10czy two padding na y zrobimy na trzy padding, na left zróbmy na 4

2:16partnera, zróbmy sobie na 6 i text ring i 50 zapiszemy sobie już nasz button.

2:24Tutaj został ładnie postulowany. Natomiast mamy problem.

2:27Nie jest to tutaj wyśrodkować dane,

2:29dlatego prawdopodobnie będziemy musieli sobie tutaj troszeczkę popracować.

2:32Naszym drzewem klas i tak potrzebujemy Flex Full Items Center.

2:43Czas i vCenter i GA.

2:45Pomiędzy item ami zrobimy sobie na 4 zapiszemy to.

2:49Teraz mamy coś takiego.

2:52Jeżeli chodzi o to jaki sposób to miałoby być ułożone

2:57tutaj, to musimy się zastanowić, żeby te ikony i ten napis były pod sobą.

3:01No to flex call potrzebujemy.

3:05Mamy już ikony i napisy pod sobą.

3:07Myślę, że ten gap tutaj jest na razie

3:09niepotrzebny, za bardzo oddala tutaj to wszystko od siebie.

3:12To może zostawimy sobie to na chwilę obecną.

3:15Także mamy już tutaj wystylizowany guzik do dodawania naszej subskrypcji.

3:20Teraz zajmiemy się kolejnym elementem, to znaczy zajmiemy się

3:24elementem, który jest odpowiedzialny za zarządzanie naszym użytkownikiem.

3:29I tutaj już użyjemy gotowego elementu, który dostarcza nam Clark.

3:33Natomiast troszeczkę go sobie z custom.