Projekt Glowny: Kosmiczny Dashboard z Roznymi Podejsciami do Stylowania

Czas na podsumowanie! W tym projekcie zbudujesz Kosmiczny Dashboard Misji, który laczy różne podejscia do stylowania. To jak zbudowanie kompletnego panelu kontroli misji, gdzie każdy sektor uzywa najlepszego narzędzia do swojego zadania.

Cel projektu

Stworz dashboard, który prezentuje informację o misjach kosmicznych. Projekt powinien demonstrowac umiejetnosc stosowania różnych metod stylowania w jednym projekcie.

Wymagania

1. Uklad strony (CSS Modules)

Glowny layout dashboardu -- sidebar, naglowek, obszar główny -- powinien byc ostylowany za pomoca CSS Modules:

1/* Dashboard.module.css */
2.container {
3  display: grid;
4  grid-template-columns: 250px 1fr;
5  grid-template-rows: 60px 1fr;
6  min-height: 100vh;
7  background: #0a0a2e;
8}
9
10.sidebar {
11  grid-row: 1 / -1;
12  background: #0d1137;
13  padding: 20px;
14}
15
16.header {
17  background: #1a1a4e;
18  display: flex;
19  align-items: center;
20  padding: 0 24px;
21}
22
23.main {
24  padding: 24px;
25  overflow-y: auto;
26}

2. Komponenty interaktywne (Styled-components)

Przyciski, badge'e statusow, karty z dynamicznymi stylami:

1const StatusBadge = styled.span`
2  padding: 4px 12px;
3  border-radius: 20px;
4  font-size: 12px;
5  font-weight: bold;
6  background: ${({ status, theme }) => theme.statusColors[status]};
7  color: ${({ status }) => status === 'active' ? '#0a0a2e' : 'white'};
8`;

3. Karty i listy (Tailwind CSS)

Szybkie komponenty prezentacyjne z klasami utility:

1function CrewMember({ name, role, avatar }) {
2  return (
3    <div className="flex items-center gap-3 p-3 bg-slate-800 rounded-lg
4                    hover:bg-slate-700 transition-colors">
5      <img src={avatar} className="w-10 h-10 rounded-full" alt={name} />
6      <div>
7        <p className="text-white font-medium">{name}</p>
8        <p className="text-gray-400 text-sm">{role}</p>
9      </div>
10    </div>
11  );
12}

4. Theming (Styled-components ThemeProvider)

Caly dashboard powinien korzystac ze spolnego motywu kolorow:

1const spaceTheme = {
2  colors: {
3    background: '#0a0a2e',
4    surface: '#1a1a4e',
5    primary: '#7c4dff',
6    text: '#e0e0e0',
7    success: '#00e676',
8    warning: '#ffa726',
9    danger: '#f44336'
10  },
11  statusColors: {
12    active: '#00e676',
13    pending: '#ffa726',
14    completed: '#64b5f6',
15    failed: '#f44336'
16  }
17};

5. Responsywnosc

Dashboard powinien byc responsywny -- na mniejszych ekranach sidebar chowa sie, a siatka kart przechodzi w kolumne:

1/* Dashboard.module.css */
2@media (max-width: 768px) {
3  .container {
4    grid-template-columns: 1fr;
5  }
6  .sidebar {
7    display: none;
8  }
9}

Struktura komponentow

1App
2  ThemeProvider (spaceTheme)
3    GlobalStyles
4    DashboardLayout (CSS Modules)
5      Sidebar (CSS Modules)
6        NavItem (CSS Modules)
7      Header (CSS Modules + Styled StatusBadge)
8      MainContent
9        MissionGrid (Tailwind grid)
10          MissionCard (Styled-components, dynamiczne props)
11            StatusBadge (Styled, zmiana koloru wg status)
12        CrewList (Tailwind)
13          CrewMember (Tailwind)

Wskazowki

• Zacznij od layoutu (CSS Modules) -- stwórz grid z sidebar, header i main
• Dodaj komponent ThemeProvider i GlobalStyles
• Zbuduj interaktywne komponenty (karty misji, badge statusow) z styled-components
• Uzyj klas Tailwind do szybkich elementow prezentacyjnych (lista zalogi, siatka kart)
• Pamietaj o spojnosci kolorow -- wszystkie kolory powinny pochodzic z motywu
• Dodaj przynajmniej jeden hover/focus efekt i jedna animacje

Kryteria oceny

1. CSS Modules uzyte do layoutu (grid, sidebar, header)
2. Styled-components uzyte do co najmniej 3 komponentow z dynamicznymi propsami
3. Tailwind CSS uzyte do co najmniej 2 sekcji prezentacyjnych
4. ThemeProvider z zdefiniowanym motywem kolorow
5. Responsywnosc -- dashboard dziala na roznych rozmiarach ekranu

Poniżej znajdziesz przykład gotowego dashboardu, który laczy wszystkie trzy podejscia. Przeanalizuj kod i zainspiruj sie do stworzenia własnej wersji!