Projekt: Kosmiczny Panel Kontroli Misji

Gratulacje, Nawigatorze! Dotarłeś do końca tego modułu i nadszedł czas, aby połączyć wszystkie poznane techniki stylowania w jeden, kompleksowy projekt. Twoim zadaniem jest stworzenie Kosmicznego Panelu Kontroli Misji — interaktywnego dashboardu, który wykorzysta wiedzę z całego modułu.

Cel projektu

Zbudujesz panel kontrolny statku kosmicznego, który łączy:

• Styled Components z dynamicznym themingiem
• Animacje CSS z

  @keyframes

• Responsywny layout z CSS Grid i Flexbox
• Theming (tryb jasny/ciemny)
• Interaktywne elementy z efektami hover i transition

Architektura projektu

Projekt składa się z kilku kluczowych sekcji:

1. System motywów (Theming)

Wykorzystujemy

ThemeProvider

ze styled-components, aby zarządzać kolorami i stylami w całej aplikacji:

1const darkTheme = {
2  bg: '#0a0a1a',
3  surface: '#12122a',
4  accent: '#00ff88',
5  text: '#e0e0e0',
6  danger: '#ff4444',
7  warning: '#ffaa00'
8};
9
10const lightTheme = {
11  bg: '#f0f4f8',
12  surface: '#ffffff',
13  accent: '#0066ff',
14  text: '#1a1a2e',
15  danger: '#cc0000',
16  warning: '#cc8800'
17};

2. Animacje CSS

Panel wykorzystuje kilka typów animacji, które poznałeś w module:

1/* Pulsowanie statusu */
2@keyframes pulse {
3  0%, 100% { opacity: 1; }
4  50% { opacity: 0.5; }
5}
6
7/* Wjazd z przesunięciem */
8@keyframes slideIn {
9  from {
10    opacity: 0;
11    transform: translateY(20px);
12  }
13  to {
14    opacity: 1;
15    transform: translateY(0);
16  }
17}
18
19/* Obracanie radaru */
20@keyframes rotate {
21  from { transform: rotate(0deg); }
22  to { transform: rotate(360deg); }
23}

3. Styled Components z propsami

Dynamiczne stylowanie komponentów na podstawie przekazanych propsów:

1const StatusBadge = styled.span\`
2  padding: 4px 12px;
3  border-radius: 12px;
4  font-size: 12px;
5  font-weight: bold;
6  background: \${props => props.active ? '#00ff8833' : '#ff444433'};
7  color: \${props => props.active ? '#00ff88' : '#ff4444'};
8  animation: pulse 2s infinite;
9\`;
10
11const Card = styled.div\`
12  background: \${props => props.theme.surface};
13  border: 1px solid \${props => props.theme.accent}33;
14  border-radius: 12px;
15  padding: 20px;
16  transition: transform 0.3s ease, box-shadow 0.3s ease;
17
18  &:hover {
19    transform: translateY(-4px);
20    box-shadow: 0 8px 25px rgba(0, 255, 136, 0.15);
21  }
22\`;

4. Responsywny layout z CSS Grid

Panel automatycznie dostosowuje się do szerokości ekranu:

1.dashboard-grid {
2  display: grid;
3  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
4  gap: 20px;
5  padding: 20px;
6}
7
8@media (max-width: 768px) {
9  .dashboard-grid {
10    grid-template-columns: 1fr;
11  }
12}

5. Kompletna struktura komponentu

Główny komponent

App

łączy wszystkie elementy:

1function App() {
2  const [isDark, setIsDark] = useState(true);
3
4  return (
5    <ThemeProvider theme={isDark ? darkTheme : lightTheme}>
6      <GlobalStyle />
7      <Header>
8        <Title>Mission Control</Title>
9        <ThemeToggle onClick={() => setIsDark(!isDark)}>
10          {isDark ? '☀️' : '🌙'}
11        </ThemeToggle>
12      </Header>
13      <DashboardGrid>
14        <StatusCard systems={systemsData} />
15        <RadarCard />
16        <MissionsCard missions={missionsData} />
17        <CrewCard crew={crewData} />
18      </DashboardGrid>
19    </ThemeProvider>
20  );
21}

Kluczowe techniki zastosowane w projekcie

| Technika | Zastosowanie w projekcie | |----------|--------------------------| | Styled Components | Wszystkie komponenty UI | | ThemeProvider | Przełączanie dark/light mode | |

@keyframes

| Pulsowanie statusów, obrót radaru, wjazd kart | | CSS Grid | Layout dashboardu | | Flexbox | Układ wewnętrzny kart | |

transition

| Efekty hover na kartach i przyciskach | | Props dynamiczne | Kolory statusów, warunkowe style | | Responsywność |

auto-fit

i

minmax

w gridzie |

Podsumowanie modułu

W tym module poznałeś pełne spektrum technik stylowania w React:

1. Klasyczny CSS i CSS Modules — fundament stylowania z izolacją klas
2. Styled Components — CSS-in-JS z dynamicznymi propsami i themingiem
3. SCSS — preprocesor z zmiennymi, mixinami i zagnieżdżaniem
4. Tailwind CSS — podejście utility-first dla szybkiego prototypowania
5. Frameworki UI — gotowe biblioteki komponentów (MUI, Ant Design, Chakra)
6. Design Systems — budowanie spójnych systemów projektowych
7. React Transition Group — animowanie cyklu życia komponentów
8. Animacje CSS —

   @keyframes

   ,

   transition

   i zaawansowane efekty

Każda z tych technik ma swoje miejsce w arsenale kosmicznego programisty. Najlepsi inżynierowie potrafią łączyć je w spójny system — dokładnie tak, jak w tym projekcie.

Wypróbuj panel poniżej i eksperymentuj z kodem — zmień kolory motywu, dodaj nowe animacje lub rozbuduj sekcje dashboardu!