⭐ Jeśli będziesz mieć problem z rozwiązaniem tego zadania, poproś o pomoc na odpowiednim kanale na Slacku, tj.
s2e05-react-styling(dotyczy mentee). Pamiętaj, aby treść Twojego wpisu spełniała odpowiednie kryteria.
Twoim zadaniem jest przygotować komponent <Alert>, który ma wyglądać podobnie do tego z Bootstrapa.
W zależności od wartości props o nazwie variant element ma być renderowany z innym tłem. Nie musisz tworzyć styli dla wszystkich wariantów, wystarczą dwa wybrane (np. primary i secondary).
Idealnie, gdyby zestaw kolorów można było definiować przy pomocy ThemeProvidera. Jeśli mamy zdefiniowany motyw, to kolory są pobierane za jego pośrednictwem. W przeciwnym razie wykorzystywane są te standardowe (domyślne).
Zwróć uwagę, że w lokalizacji ./src/components/Alert jest kilka plików:
- Alert.js – nasz komponent
- Alert.styled.js – wygląd komponentu
- index.js – plik, który importuje i eksportuje zestaw niezbędnych elementów.
Kod w tych plikach będziesz musiał zmodyfikować – tak aby w pliku ./01/Task01.js były renderowane komponenty o poprawnym wyglądzie.
W ./01/Task01.js importujemy komponenty z React Boostrap oraz komponent stworzony przez Ciebie w celu porównania ich wyglądu.
PS Koncepcji na budowanie struktury plików jest wiele. To zazwyczaj zespół wspólnie decyduje o tym, jak ma ona wyglądać. Przemyślaną strukturę ma np. komponent <Button> w Atlassian.
⬅️
poprzednie zadanie| następne zadanie ➡️