React: Rozbudowa komponentu karty cz.2

16.8.x

0:00Cześć, w poprzedniej lekcji udało nam się stworzyć nowego props'a do naszego

0:04card komponentu, który deklaruje nam jaki kolor

0:08będziemy używać, a deklaruje to na podstawie funkcji, którą będzie pełnić

0:12czy będzie to notatka czy będzie to twitter czy będzie to article i teraz chciałbym przejść

0:16do kolejnego etapu, w którym będzie mieć jeszcze dodatkowe dwa elementy jednym będzie

0:20zdjęcie, będzie miniaturka twitter'owa, a drugim będzie link do artykułu,

0:24do którego nawiązuje dana karta, więc teraz musimy

0:28sobie stworzyć tak naprawdę dwa małe styled-components, które będą osobno

0:33wyświetlane tutaj w tym miejscu. Pierwszym z nich będzie styled avatar,

0:38który będzie po prostu obrazkiem, jak

0:44zerkniemy sobie na design'y, ten obrazek ma 86 pikseli.

0:49Dodatkowo

0:59ma jeszcze ramkę, więc

1:04możemy mu nadać border i wyciągniemy

1:09sobie Active

1:18Color oraz theme, a właściwie to nie musimy tego wyciągać,

1:22ponieważ to jest ramka, która się pojawia tylko przed twitterach, więc właściwie możemy

1:26użyć tylko theme twitter. Dodatkowo

1:35nasz Avatar będzie pozycjonowany absolutnie, ale

1:41żeby to działało to musimy się upewnić że nasz inner wrapper, czyli rodzic

1:45jest pozycjonowany relatywnie, w ten

1:51sposób możemy zadeklarować, że odległość od prawej strony będzie

1:56wynosić 20 pikseli i podobnie

2:02z górą, więc tutaj robimy, powiedzmy, dajmy

2:06na razie 25 pikseli, zobaczymy jak to będzie wyglądać i od góry podobnie

2:1125. Tutaj mamy jakiś

2:15błąd w naszej funkcji, okej, o jedną

2:21klamrę za wiele i teraz jeśli mam już ostylowany nasz Avatar. Możemy

2:27sobie go przetestować i teraz

2:34do pobierania to twitter'owych avatarów znalazłem taki serwis, nazywa

2:42się avatars io, w którym wystarczy, że podajemy

2:46nazwę konta, a on nam skopiuje cały

2:50Avatar, musimy jeszcze tutaj dodać border radius, ok i sprawdźmy

2:59czy to w ogóle jakkolwiek wygląda. Jest prawie dobrze z tym

3:05tylko wyjątkiem, że nie widzimy tego wystają

3:09tego czubka naszego kółka i prawdopodobnie

3:13wynika to z tego, że po prostu ten dolny przykrywa nam ten górny pasek,

3:18więc teraz możemy zrobić jeszcze coś takiego, że

3:22podamy sobie, że pierwszy z komponentów inner

3:30wrapper będzie miał z-index dajmy mu jakieś wysoki,

3:34okej i teraz ten górny przykrywa nam ten dolny

3:38i widzimy też nasz avatar, który nam wystaje z tym tylko,

3:43że ten border jest trochę za cienki możemy tutaj dać

3:47spokojnie pięć pikseli, myślę że to będzie okej i teraz jeśli

3:53wrócimy sobie do naszych design'ów, to zobaczymy, że mamy jeszcze w trzecim rodzaju naszej

3:57karty, czyli w artykule, memy link w postaci takiego

4:01guzika z ikoną linku. W zasobach do tej

4:05lekcji pojawił się już link svg, więc teraz go sobie zaimportujemy tutaj

4:09i stworzymy

4:20sobie ostylowany link, który będzie

4:24miał 47 pikseli i teraz

4:34jako tła możemy sobie użyć dwóch wartości, pierwszy to będzie właśnie white,

4:38a drugi to będzie URL, z którego wyciągniemy sobie zaimportowany

4:43link icon. Okej,

4:52skoro mamy teraz już te dwa elementy w naszym JSX'ie to musimy dodać pewną logikę,

4:56która nam pozwoli na to, że będą one wyświetlane warunkowo, otworzymy

5:02sobie teraz klamry i stworzymy takie, taki warunek. Jeżeli card type

5:07będzie twitter'em to wyświetlimy Avatar, a jeśli

5:11card type będzie artykułem, no to wyświetlimy link do artykułu i w

5:16tej chwili w naszym storybook'u powinniśmy zobaczyć tak,

5:20w artykułach mamy link, który działa

5:24tylko, że wygląda źle. Jest jeszcze nie ostylowany, więc teraz tutaj

5:28wydaje mi się że musimy tutaj stworzyć wielkość

5:3450%, background position ustawimy na

5:3850%, może być

5:42troszkę większy i podobnie jak nasz Avatar

5:46musi mieć pozycję absolutną, okej i

5:57teraz znajduje się idealnie na środku, więc mam już ostylowanie

6:02trzy rodzaje naszego komponentu karty. Możemy przejść

6:06do dalszego rozwoju naszej aplikacji.