# React Feladat: Téma Váltó Alkalmazás

**Bejelentkezés szintje:** Alapszintű  
**Becsült időtartam:** 45 perc  
**Megkövetelt technológiák:** React, React Router, Context API, Tailwind CSS

---

## 📋 Feladat Leírása

Készítsd el egy egyszerű **Téma Váltó (Theme Switcher)** alkalmazást React-ben, amely lehetővé teszi a felhasználónak, hogy váltson a világos és sötét mód között. Az alkalmazásnak tartalmaznia kell egy felső navigációs sávot, többoldali routing-ot és globális állapotkezelést Context API-val.

---

## 🎯 Elvégzendő Feladatok

### 1. Projekt Beállítás (5 perc)
- [ ] Proj már létezik vagy új Vite + React projekt létrehozása
- [ ] Tailwind CSS telepítése és konfigurálása
- [ ] React Router (v6) telepítése és beállítása

### 2. Context API Beállítása (8 perc)
- [ ] Hozz létre egy `ThemeContext.jsx` fájlt
- [ ] Domb le az alábbi értékeket a context-ben:
  - `theme` (light / dark)
  - `toggleTheme()` függvény
- [ ] Wrapped az App komponenst a `ThemeProvider`-rel

### 3. Navigáció Komponens (10 perc)
- [ ] Hozz létre egy `Navbar.jsx` komponenst
- [ ] Tartalmazzon:
  - Logo/alkalmazásnév
  - 2-3 db navigációs linkek (Home, About, Contact)
  - **Téma váltó gomb** (☀️ / 🌙 ikon vagy szöveg)
- [ ] Styling Tailwind-vel (responsive, reszponzív dizájn)
- [ ] A navbar viselkedje a theme alapján az osztályokat

### 4. Routing Beállítása (7 perc)
- [ ] Konfigurálj 3 oldalt:
  - **Home** (`/`) - Üdvözlő oldal
  - **About** (`/about`) - Rövid bemutatkozás
  - **Contact** (`/contact`) - Dummy kontakt form
- [ ] Hozz létre komponenseket az egyes oldalakhoz

### 5. Home Oldal Implementálása (10 perc)
- [ ] Beágyazz egy hőséges fejléc ("Welcome to Theme Switcher")
- [ ] Tartalmazz szövegeket és egyCall-to-Action gombot
- [ ] Styling Tailwind-vel (gradient, árnyékok, responsivitás)
- [ ] Gondoskodj arról, hogy az aktuális téma alapján megíródnak az osztályok

### 6. Egyéb Oldalak (5 perc)
- [ ] **About oldal:** Rövid szöveg az alkalmazásról
- [ ] **Contact oldal:** Dummy form vagy kontakt információ
- [ ] Mindkét oldal legyen tema-aware

---

## 📁 Kötelező Fájlok Szerkezete

```
src/
├── context/
│   └── ThemeContext.jsx
├── components/
│   ├── Navbar.jsx
│   ├── Home.jsx
│   ├── About.jsx
│   └── Contact.jsx
├── App.jsx
├── App.css (üres vagy minimal)
└── index.css (Tailwind imports)
```

---

## 🎨 Minimális Tailwind Stílus Követelmények

- [ ] Light mode: fehér háttér, sötét szöveg
- [ ] Dark mode: sötét háttér (pl. slate-900), világos szöveg
- [ ] Navbar: sticky felső sáv, logó, linkek, theme toggle gomb
- [ ] Home oldal: nagy fejléc, hero szekció, CTA gomb
- [ ] Responsive: mobile, tablet, desktop nézetekben működjön

---

## 💾 Context API Struktura

```javascript
// ThemeContext.jsx
export const ThemeContext = createContext();

export const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');
  
  const toggleTheme = () => {
    setTheme(prev => prev === 'light' ? 'dark' : 'light');
  };
  
  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};
```

---

## 🚀 Bonus Feladatok (opcionális)

- [ ] Local Storage-ba mentsd az aktuális téma preferenciát
- [ ] Smooth transition az egyik téma között (CSS transition)
- [ ] Több mint 3 oldal hozzáadása
- [ ] Form validáció a Contact oldalon

---

## ✅ Ellenőrzőlista az Elkészüléshez

- [ ] Az alkalmazás elindul hiba nélkül
- [ ] A téma váltó gomb működik (light ↔ dark)
- [ ] Az összes oldal theme-hez igazodik
- [ ] A navbar mindenütt megjelenik
- [ ] A router működik az összes linkre
- [ ] Responsive design működik
- [ ] Keine console hibák

---

## � Parancsok és Kód Sablonok

### Telepítési Parancsok

```bash
# Új Vite + React projekt
npm create vite@latest my-theme-app -- --template react
cd my-theme-app
npm install

# React Router telepítése
npm install react-router-dom

# Tailwind CSS telepítése
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

# Fejlesztői szerver indítása
npm run dev
```

### App.jsx Sablon

```jsx
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { ThemeProvider } from './context/ThemeContext';
import Navbar from './components/Navbar';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

function App() {
  return (
    <ThemeProvider>
      <Router>
        <Navbar />
        <main>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/about" element={<About />} />
            <Route path="/contact" element={<Contact />} />
          </Routes>
        </main>
      </Router>
    </ThemeProvider>
  );
}

export default App;
```

### ThemeContext.jsx Sablon

```jsx
import { createContext, useState } from 'react';

export const ThemeContext = createContext();

export const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(prev => prev === 'light' ? 'dark' : 'light');
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};
```

### Navbar.jsx Sablon

```jsx
import { useContext } from 'react';
import { Link } from 'react-router-dom';
import { ThemeContext } from '../context/ThemeContext';

export default function Navbar() {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <nav className={`${theme === 'dark' ? 'bg-slate-900 text-white' : 'bg-white text-black'} border-b shadow-lg sticky top-0 z-50`}>
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center h-16">
          {/* Logo */}
          <Link to="/" className="text-2xl font-bold">
            🎨 Theme App
          </Link>

          {/* Links */}
          <div className="hidden md:flex space-x-6">
            <Link to="/" className="hover:text-blue-500 transition">Home</Link>
            <Link to="/about" className="hover:text-blue-500 transition">About</Link>
            <Link to="/contact" className="hover:text-blue-500 transition">Contact</Link>
          </div>

          {/* Theme Toggle */}
          <button
            onClick={toggleTheme}
            className="p-2 rounded-lg bg-blue-500 hover:bg-blue-600 transition"
          >
            {theme === 'light' ? '🌙' : '☀️'}
          </button>
        </div>
      </div>
    </nav>
  );
}
```

### Home.jsx Sablon

```jsx
import { useContext } from 'react';
import { ThemeContext } from '../context/ThemeContext';

export default function Home() {
  const { theme } = useContext(ThemeContext);

  return (
    <div className={`${theme === 'dark' ? 'bg-slate-900 text-white' : 'bg-white text-black'} min-h-screen`}>
      <div className="max-w-7xl mx-auto px-4 py-20 text-center">
        <h1 className="text-5xl font-bold mb-4">Üdvözlünk!</h1>
        <p className="text-xl mb-8">Ezt az alkalmazást a React, Router és Context API segítségével készítettük.</p>
        <button className="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg text-lg transition">
          Tudj meg többet
        </button>
      </div>
    </div>
  );
}
```

### Tailwind CSS Import (index.css)

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

### Contexet Használata Komponensben

```jsx
import { useContext } from 'react';
import { ThemeContext } from '../context/ThemeContext';

export default function MyComponent() {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <div className={theme === 'dark' ? 'bg-slate-900' : 'bg-white'}>
      {/* tartalom */}
    </div>
  );
}
```

---

## �🔗 Hasznos Linkek

- [React Router v6 Dokumentáció](https://reactrouter.com/)
- [Context API Dokumentáció](https://react.dev/reference/react/useContext)
- [Tailwind CSS Dokumentáció](https://tailwindcss.com/)

---

**Sok sikert! 🚀**