Next.js 13 w Praktyce: Header na stronie Dashboard

0:01Dobrze budowania naszej treści na stronie.

0:03Nasz portal rozpoczniemy od jednego

0:05komponentu wspólnego tak naprawdę dla wszystkich stron naszej aplikacji.

0:09Mianowicie jeżeli zobaczysz na stronie

0:11Dashboard mamy tą górną część napisu z napisem Dashboard.

0:15I mamy te dwa guziki, które jeden służy do eksportu pliku CSV

0:21prawdopodobnie z substytutami z tego startupu.

0:24Natomiast drugi służy do otwarcia command palet.

0:29I tutaj jeżeli chodzi o stronę subskrypcji mamy tak naprawdę bliźniaczo podobny

0:32komponent, gdzie tylko zmieniamy title, także możemy się zająć najpierw

0:38zbudowaniem tutaj tej części naszego portalu.

0:41Przejdźmy do naszego edytora kodu i do naszej przeglądarki.

0:45Ja sobie troszeczkę powiększyłem rozmiar

0:47przeglądarki i powiększyłem rozmiar edytora kodu, żebyśmy mogli lepiej widzieć

0:52co tutaj będzie wyświetlane w miarę postępu naszych prac tutaj.

0:57Także przejdźmy teraz do naszego Dashboard, czyli Application

1:02App Dashboard i tu mamy nasz page Hello from Dashboard.

1:07Na chwilę obecną natomiast

1:09zacznijmy od tego, że zmienimy tutaj na sekcje Będzie to sekcja naszej stronie.

1:15Jeżeli chodzi o opcje

1:17to całą sekcję chcemy żeby ona była na wysokości całego ekranu

1:22I czyli miała padding wielkości 8 to sobie na chwilę obecną ustawimy.

1:27Jeżeli chodzi o tutaj padding już mamy ustawiony dobry tak jak powinien być.

1:32Teraz przejdźmy do edytowania poszczególnych elementów.

1:36Co będziemy potrzebować to na pewno jednym

1:39głównym elementem będzie Top header Web buttons.

1:45To jest ten główny element, który widzimy tutaj w naszym dizajnie.

1:47To jest ten top header buttons i element poniżej.

1:51To będzie cały content dla danej strony.

1:54On będzie, content będzie dynamiczny.

1:56Jak widzisz tutaj jeżeli chodzi o dashboard mamy jakieś statystyki, mamy

2:00podgląd tabelki z subskrypcja i mamy podgląd statystyk dotyczących kategorii.

2:05Natomiast jeżeli chodzi o następną stronę to mamy też statystyki dotyczące

2:10poszczególnych subskrypcji, no i listę wszystkich subskrypcji.

2:15Także jak widzisz treść jest jak najbardziej dynamiczna.

2:17Natomiast jeżeli chodzi o ten komponent

2:19tutaj u góry, to jak najbardziej możemy to myślę ograć jednym komponentem, który

2:23będzie tylko przyjmował propa w postaci tytułu strony na której się znajdujemy.

2:29Przejdźmy do naszego edytora kodu i

2:31zaznaczymy tutaj, że następna część to będzie content.

2:35Zacznijmy odbudowę tego komponentu.

2:37Jeżeli chodzi o nasz, postawimy sobie ten komponent najpierw

2:41tutaj w Dashboard Page, a potem spróbujemy go wyeksportować do osobnego komponentu,

2:46który będziemy mogli sobie również użyć na stronie subskrypcji.

2:51Także zaczniemy od budowy tego content feedera.

2:55Zacznijmy od diva.

2:56Tutaj Jeżeli chodzi o to, to na pewno będziemy potrzebowali jakąś H1, która

3:00będzie określała naszą nasz tytuł naszej strony.

3:04Póki co jako że jesteśmy na dashboard to możemy sobie wpisać dashboard.

3:10Zapiszemy to sobie.

3:11Jeżeli chodzi o kolejny element, który będzie tutaj potrzebny.

3:15To będziemy potrzebowali tak naprawdę

3:17dwa batony, czyli możemy je też ograć tak, że zamkniemy je tutaj w jeden

3:22kontener i to wszystko odsuniemy od siebie.

3:25Bo tak jak widzisz batony zawsze są na końcu po prawej strony.

3:28Czyli możemy sobie skorzystać tutaj z

3:30flexa na cały ten kontener i sci fi content space between.

3:34Sprawi to, że jedynka zawsze będzie po lewej stronie, a te dwa guziki tutaj

3:39zawsze będą po prawej stronie naszego holdera.

3:42Także przejdźmy do poznania teraz kolejnego elementu.

3:48Pod naszym drzewem zrobimy sobie wrapper i tutaj będziemy mieli dwa batony.

3:53Jeden to będzie baton, gdzie

3:56będziemy mieli napis Command Palette i tutaj będziemy potrzebowali sobie

4:02znak specjalny jeżeli chodzi o smak, bo to jest odczyn + K.

4:06Jeżeli chodzi o drugi baton to mamy baton i tutaj będzie export CSV.

4:13Zapiszemy sobie to co mamy.

4:14No widzisz, tutaj nam się już pewne rzeczy pojawiły, natomiast teraz musimy zająć się

4:19stylowo tego wszystkiego, żeby to wyglądało tak jak na naszym designie.

4:23Tutaj także przejdźmy do naszego edytora

4:25kodu i zaczniemy pisać tutaj poszczególne style.

4:28Jeżeli chodzi o sam wrapper, to na pewno musimy sobie

4:31tutaj ustawić jakiś flex, czyli flex items center i just I fit between.

4:39O tym mówiliśmy właśnie, że chcemy sobie

4:41zamknąć to w osobnego diva, żeby te dwa elementy przez ten czas i fit between

4:47elementy po prostu przesuną się od siebie, czyli będą dalej od siebie.

4:51Tak jak widzisz mamy batony po prawej stronie, tytuł strony po lewej stronie.

4:55Teraz przejdźmy do stylu pisania tego tytułu i tutaj zrobimy tekst.

5:02Chcemy powiększyć rozmiar tego tekstu,

5:04czyli zróbmy sobie dwa XL i font, zrobimy sobie semi bold, zapiszemy sobie zmiany.

5:10Już mamy napis Dashboard, tak jak to powinno być w naszym designie.

5:15Tutaj jest prawdopodobnie użyta inna czcionka i używamy Intercity.

5:18Prawdopodobnie jest jakaś płatna czcionka, dlatego zostaniemy z naszym Interem.

5:21Może to troszeczkę się różni od designu.

5:24Wróćmy do naszej strony.

5:25Mamy H1 już postulowaną.

5:27Teraz jeżeli chodzi o ten

5:29tutaj element to też prawdopodobnie będzie flex, no bo chcemy sobie przesunąć te dwa

5:33elementy obok siebie i chcemy wyśrodkować te wszystkie elementy, żeby

5:37były fajnie drukowane, tak horyzontalnie, czyli klasy Flex i Items Center.

5:45No i GAP ustalimy sobie, żeby odsunąć te dwa guziki od siebie.

5:49Na razie na 4 mamy dwa guziki od siebie zostały odsunięte.

5:53Teraz zajmijmy się przez celowanie do tego jednego guzika.

5:57Wtedy prawdopodobnie będziemy mogli sobie tak naprawdę skopiować style z jednego do

6:00drugiego, bo w naszym designie te dwa guziki wyglądają bardzo podobnie.

6:05Także zaczniemy tutaj klasycznym od nazwania pierwszego guzika.

6:09I teraz tak round chcemy zaokrąglić rogi na medium.

6:14Chcemy zrobić border na 2.

6:16Zapiszemy sobie jeszcze zmiany.

6:17Na razie nie widzimy tak naprawdę żadnej

6:19zmiany oprócz tego, że troszkę się to odsunęło.

6:21Kolejna rzecz, którą będziemy potrzebować

6:23to kolor na border border link i zróbmy sobie tutaj 500.

6:30Jeżeli chodzi o biegi to zrobimy sobie beginning i tutaj zrobimy sobie 100 px.

6:37Ustawimy na 4 PR y czyli padding na Y ustalimy sobie na 1 tekst small.

6:46I kolor tekstu ma zasięg 500. Zapiszemy to sobie.

6:52No i już mamy wygląd bardzo zbliżony do tego co dostaliśmy tutaj na dizajnie.

6:57Także myślę, że jak najbardziej możemy się z tym zgodzić, że jest to wystarczające.

7:01I tutaj pozostaje nam nic więcej, nie

7:03mniej nie więcej niż tylko skopiować sobie te style.

7:07I wkleić tutaj do klas name.

7:11Zapiszemy to sobie i już mamy ten główny komponent tutaj header.

7:15No i teraz jak już mamy wystylizowane to co chcieliśmy mieć?

7:18No to sprawdźmy, że w eksportujemy sobie

7:22ten header, żebyśmy mogli go używać, czyli nasze komponenty.

7:26Tutaj zróbmy sobie kolejny komponent app Content header ts x.

7:35No i tutaj zrobimy sobie export default function, app content header i return.

7:45Oczywiście eksport tutaj.

7:48I jako return podamy nasz komponent, który

7:51mamy tutaj, czyli wytniemy to stąd wklejamy tutaj zapiszemy.

7:57Tutaj możemy już użyć naszego AP Content header komponentu.

8:02Zapiszemy to sobie jest wyświetlane to samo, co mieliśmy przed chwilą.

8:06Natomiast z taką różnicą, że możemy teraz

8:08tego samego komponentu użyć też na stronie subskrypcji.

8:12Natomiast zanim to zrobimy, musimy dokończyć konfigurację, no bo chcemy

8:15tak naprawdę dynamicznie przekazywać tytuł do tego komponentu.

8:20Czyli możemy.

8:21Tak naprawdę możemy sobie zapisać tutaj osobny interfejs app Content.

8:27Header. Props.

8:30I dla nas to będzie tak naprawdę title stream.

8:35Zapiszemy to i tutaj title i użyjemy naszego interfejsu.

8:42Jeżeli chodzi o to, to tej wartości użyjemy właśnie w tym miejscu.

8:48Już mamy dynamiczny komponent, który

8:49podpowiada nam o missing type, czyli w tym momencie title dashboard.

8:57Zapiszemy to sobie, mamy wyświetlenia tak jak powinno być, natomiast z tą różnicą,

9:00że teraz możemy sobie swobodnie tutaj przekopiować.

9:05Myślę, że przy kopiujemy to wszystko, wskoczymy do strony subskrypcji.

9:10No i tutaj możemy sobie wkleić naszą zawartość i

9:15podmienić tylko i wyłącznie tytuł, który używamy w naszym komponencie.

9:19I po zapisaniu tego teraz jak będziemy przechowywać dashboard skrypty.

9:23Jak widzisz mamy ten pierwszy komponent, który jest

9:26używany jako baza na wszystkich naszych stronach.

9:29Już za sobą.

9:30Przejdźmy teraz do kolejnej rzeczy, którą będziemy budować na naszym Burdzie.

9:34Mianowicie myślę, że musimy pomyśleć teraz

9:37o zatrzymywaniu danych naszego użytkownika.

9:40Czyli prawdopodobnie zasypujemy naszą bazę danych, żeby ten użytkownik

9:44konkretny, którego mamy aktualnie tutaj dostał jakieś subskrypcje.

9:49No bo na chwilę obecną jak sobie

9:51przejdziemy do naszego terminala i odpalimy nasz

9:56nasz podgląd na naszych danych, to nasz użytkownik ma 0 subskrypcji.

10:00Także prawdopodobnie będziemy musieli odpalić nasz skrypt decydujący, żeby

10:04użytkownika z emailem Daniel Kropka e-mail.

10:07Po prostu dać mu jakieś dane, na których będziemy mogli sobie

10:11teraz dalej sterować, dalej pracować, budować nasze video i na też burcie.