Next.js 13 w Praktyce: Tabelka w komponencie category breakdown

0:00Kolejnym elementem, na którym skupimy

0:02naszą uwagę będzie tabelka z kategoriami ile dana kategoria kosztuje.

0:07Zobaczmy to w designie.

0:09Mamy tabelkę z kolumną kategorii i z kolumną kosztów.

0:14Wszystkie dane potrzebne do tabelki już sobie zrobiliśmy w poprzedniej lekcji.

0:18Mamy funkcję, która poddaje nam wszystkie nasze kategorie i koszty, dlatego możemy

0:22sobie teraz przejść do naszej implementacji naszej tabelki.

0:25No jak tabelka?

0:26No to zaczniemy sobie najpierw od stworzenia tabeli table.

0:32I w tym momencie już możemy sobie ustawić klasę.

0:36Na pewno na min.

0:38WiFi chcemy mieć pełną szerokość tutaj tego komponentu.

0:45Dobrze, w tym momencie przejdźmy sobie

0:46tutaj poniżej i będziemy potrzebowali na pewno jakiegoś body.

0:51Jeżeli chodzi o naszą tabelkę.

0:52Także zaczniemy od this.

0:55I tutaj mamy tak TR i będziemy mieli

0:59dwie kolumny, czyli numer 1 i numer 2.

1:06Jeżeli chodzi o pierwszą kolumnę, to tutaj będziemy mieli kategorię.

1:11Druga kolumna to tutaj będzie zapiszemy.

1:14Mamy już naszą tabelkę tutaj po tej stronie, oczywiście z cytowaniem.

1:17Za chwilkę się zajmiemy.

1:19Jeżeli chodzi o nasze body, czyli head możemy sobie tutaj zamknąć.

1:23To jest nagłówek naszej tabeli tej body.

1:27No to tutaj musimy przyjąć też dwie rzeczy.

1:33Na pewno chcemy zmapować nasz nasze wyniki, czyli Without Map.

1:41I w tym momencie kategorii data będzie mamy nasze dane.

1:47Jeżeli chodzi o dodatek, to mamy tutaj zarówno nazwę, jak i cenę danej kategorii.

1:53Czyli teraz tr.

1:55Ten.

1:58Tutaj oczywiście jest potrzebny kij.

2:02Możemy sobie użyć naszego name jako ki.

2:06Jeżeli chodzi o zawartość tego, no to będziemy mieli.

2:11Czyli w tym momencie tutaj

2:13możemy użyć kategorii data name, no i w następnym TD mamy kategorię Data Price.

2:22Zapiszemy sobie naszą tablicę.

2:24Zobacz już tutaj.

2:25Zaczyna nam się coś pojawiać.

2:29Jest kilka rzeczy, nad którymi musimy zdecydowanie popracować.

2:34Dlatego wróćmy do stosowania najpierw naszego nagłówka naszej tabeli.

2:39To jest tutaj ten element.

2:42Jeżeli zobaczymy na nasz design, to mamy tutaj jakiś napis Divide dir.

2:49Pod tym nagłówkiem prawdopodobnie też mamy inną czcionkę.

2:54Jest to napisane inaczej i tutaj te odstępne też są zupełnie inne.

2:58Przejdźmy sobie jeszcze raz tutaj do

3:00naszego komponentu i zaczniemy od stylu naszego Hm.

3:05Może najpierw klas name i tutaj tak zrobimy.

3:11Border bottom, border color.

3:15Zrobimy na ring.

3:18Niech to będzie kolor Ring 300.

3:22Dodatkowo piękne.

3:23Zrobimy sobie też Nothing 50, żeby odróżnić ten Eder od całej reszty.

3:30Jeżeli chodzi o następne rzeczy, które będziemy

3:34potrzebować to padding na x 6, padding na y 2.

3:40Tekst po lewej stronie, nie pośrodku.

3:45Tekst chcemy troszeczkę pomniejszyć, jednak font normal możemy.

3:49Nie musimy tego pisać.

3:50Tekst, zasięg i niech to będzie 400.

3:54I zapiszemy sobie nasze zmiany.

3:57Sprawdźmy jak wygląda.

3:58No już ta kategoria tutaj wygląda dużo lepiej.

4:01Przejdźmy teraz do kolejnego elementu.

4:03Możemy tak naprawdę skopiować sobie te style cały class name.

4:08Tak naprawdę ten TH też będzie miał podobny klasę.

4:12Mamy kategorię mamy PRISM.

4:14Teraz przejdźmy do sterowania naszej

4:16tabelki i sprawdzimy czy jest ona dobrze ułożona w naszym kontenerze.

4:23Myślę, że przydałoby się z tego względu,

4:25że musimy jednak mieć tutaj wychodzić poza te padding.

4:31Różne są szkoły.

4:32Generalnie rzecz biorąc mamy padding nałożony na nasz cały kontener.

4:35Dlatego też tutaj

4:37na ten element możemy sobie ustawić position relative i na naszą tabelkę.

4:43Wtedy możemy sobie ją ustawić,

4:46jakby wrzucić ją w div i ustawić ją tak naprawdę absolutnie do tego.

4:52Spróbujemy to zrobić najpierw na naszej tabeli.

4:55Absolut i tak bottom 0 sobie ustawimy, left też 0.

5:03Sprawdźmy jak to będzie wyglądało, bo na razie.

5:06Jesteśmy tak na samym dole.

5:09Top 0 też sobie ustawimy.

5:12No przyniosła nam się tabelka tak jak ma się przenieść.

5:15Jeżeli chodzi o margin x to musimy przesunąć to sobie

5:21o tą wartość którą mamy padding na naszym kontenerze czyli padding jest na 6 czyli

5:26prawdopodobnie będziemy musieli sobie tutaj ustawić minus tam x na 6.

5:33To pozwoli nam zrobić to, że tabelka nasza przesunie się na tę stronę.

5:41Jeżeli chodzi o wysokość to na full ustawimy sobie.

5:45Myślę, że tak naprawdę jeżeli chodzi o

5:48style tutaj z tego co już widzę, to warto byłoby jednak coś sobie tutaj

5:52opakować w dodatkowy kontener, tą naszą tabelę.

5:56I jeżeli sobie teraz przeniesiemy ją troszeczkę wyżej ten plastik.

6:01Jednak na rzucimy na nasz kontener.

6:03Myślę, że będziemy mieli większą kontrolę nad tym, jak to wszystko tutaj wygląda.

6:07Mamy już to lepiej kontrolować.

6:10Dodatkowa rzecz myślę tu. Tutaj mamy.

6:15Wszystko już jest ok, ustawione minus full

6:20to de facto tego nie potrzebujemy tutaj ustawiać.

6:23Natomiast myślę, że minuty full dobrze byłoby ustawić tutaj na ten element.

6:30Mamy to już zrobione i myślę, że to by było na tyle.

6:35Na chwilę obecną

6:37musimy jeszcze tutaj tylko przesunąć oczywiście tą tabelkę bardziej w prawą

6:41stronę i popracować troszkę tutaj nad tymi danymi, które są wyświetlane.

6:46Także przejdźmy najpierw tutaj do tej mapy.

6:51W której wyświetlamy sobie nasze elementy

6:54i zaczniemy od tego, żeby zrobić tu fixed do dwóch miejsc po przecinku.

7:00Jeszcze troszeczkę ułatwi naszą sprawę.

7:03Jeżeli chodzi o zdecydowanie.

7:08Category data name.

7:09No to myślę, że możemy skorzystać tutaj

7:12też z pewnych klas i zajmijmy się najpierw tym TID tej.

7:20Tutaj piszemy void wrap.

7:24Jeżeli chodzi o px zrobiłem na 6 p y zrobimy sobie na 3.

7:31Tekst ustawimy na mniejszy i tekst z

7:35linkiem możemy sobie tu zostawić tak jak jest.

7:38Okej, no już wygląda to troszeczkę lepiej.

7:40Są odsunięte od siebie te wartości.

7:43Przejdźmy teraz do sterowania.

7:45Jeżeli chodzi o kategorie name myślę, że tutaj nie będziemy musieli sobie

7:51nic celować, chociaż dobrze byłoby to jednak tutaj zapakować w jakiś wrapper np.

7:57w postaci paragrafu.

7:59I tą category name też możemy sobie odpowiednio tutaj ustawić.

8:03Myślę, że tak naprawdę to co teraz to jest jak najbardziej wystarczające, natomiast

8:08tutaj o tą część to musimy się zająć na pewno tą kategorią.

8:12Tak? Przejdźmy do Tides.

8:18I.

8:20I zaczniemy od nowa.

8:27Dodatkowo PX ustawimy sobie na 6

8:31P i ustawimy też na może trochę mniejszą wartość Tekst damy po prawej stronie.

8:38Sprawdźmy jeszcze co zmienić w naszym myślano.

8:40Już się troszeczkę zmieniło nasze wyświetlanie naszej tabelki.

8:44Jeżeli chodzi o font to ustawimy sobie sami bold.

8:48Dodatkowo można jeszcze zmienić to.

8:51Jest to wszystko w porządku.

8:54Dobrze, mamy już wyświetlanie tych danych.

8:55Teraz co jeszcze nam nie pasuje to

8:57zdecydowanie szerokość tutaj tego elementu.

9:00Sprawdźmy sobie w naszej przeglądarce WinXP.

9:04Jak to teraz na chwilę obecną wygląda?

9:06Zobaczmy dlaczego tutaj ten element nie jest na pełną szerokość.

9:11Mamy tutaj główny wrapper, który ma padding ustawiony

9:15na 6, natomiast my tutaj mamy naszą tabelkę No która generalnie rzecz biorąc.

9:22Tutaj chyba nam brakuje bottom left top a.

9:26Oczywiście, że tutaj generalnie powinniśmy chyba jeszcze ustawić.

9:31Sprawdźmy w naszych stylach.

9:34Bottom Left top.

9:37RAID 0.

9:39No i już teraz nasza tabelka tak naprawdę zajmuje całe miejsce.

9:43Musimy się jeszcze skupić na wysterowaniu tego elementu.

9:47TXT left Oczywiście to jest niefortunne.

9:49Tutaj w tym przypadku potrzebujemy Tech Street.

9:52I tak naprawdę możemy uznać, że nasz komponent z wyświetlaniem

9:56podstawowych statystyk dotyczących naszych kategorii jest prawie skończony.

10:01Sprawdźmy jeszcze design czcionkę.

10:03Tutaj widzę, że jest wyraźnie inna przy sobie.

10:05Przesuniemy na lewą stronę tą firmę.

10:08No to widzisz, że tutaj mamy za grubą czcionkę Zdecydowanie.

10:12Cała reszta myślę, że jest ok.

10:13Brakuje nam jeszcze tutaj waluty, którą też możemy dodać.

10:16Tak samo jest tutaj.

10:18Jeżeli chodzi o tą niższą część też jest w miarę ok.

10:21Z passing jeszcze możemy troszeczkę sobie poprawić.

10:24Natomiast wróćmy najpierw do tych czcionek, żeby one lepiej wyglądały.

10:29Jeżeli chodzi o te czcionki to mamy tu kategorii price.

10:32W tym momencie możemy sobie zrobić font lite.

10:36No już to wygląda dużo lepiej.

10:38Zobaczmy firmę nasz design.

10:41OK, i sprawdzimy sobie tutaj jeszcze te odstępy.

10:45Powinny być jednak troszeczkę większe od tych elementów.

10:49Czyli wróćmy do naszej naszej tabelki z kategoriami, elementy z kategoriami.

10:55No i tutaj mamy te dwa elementy,

10:57które odpowiadają nam za najbardziej drogą, kategorię, no i najtańszą.

11:03Generalnie rzecz biorąc możemy po prostu

11:05na te H1, gdzie tutaj nam dać margin po ton na 2?

11:10Sprawdźmy jak to będzie wyglądało.

11:12No odsunęły się już od siebie.

11:14Także myślę, że kategorii breakdown możemy uznać za zamknięte.

11:18Teraz przejdziemy do budowania

11:20tej tabelki z danymi, które potrzebujemy, żeby wyświetlić naszemu użytkownikowi.