init push

frontend/src/pages/Home.jsx

@@ -0,0 +1,91 @@
+import { useState, useEffect } from 'react';
+import { fetchRecipes, fetchCategories } from '../api';
+import RecipeCard from '../components/RecipeCard';
+
+const ALL_CATEGORIES = ['Alle', 'Frühstück', 'Hauptgericht', 'Dessert', 'Snack', 'Getränk', 'Sonstiges'];
+
+export default function Home() {
+  const [recipes, setRecipes] = useState([]);
+  const [categories, setCategories] = useState([]);
+  const [search, setSearch] = useState('');
+  const [selectedCategory, setSelectedCategory] = useState('Alle');
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    loadRecipes();
+    loadCategories();
+  }, [search, selectedCategory]);
+
+  const loadRecipes = async () => {
+    setLoading(true);
+    try {
+      const data = await fetchRecipes(search, selectedCategory);
+      setRecipes(data);
+    } catch (e) {
+      console.error('Fehler beim Laden:', e);
+    }
+    setLoading(false);
+  };
+
+  const loadCategories = async () => {
+    try {
+      const data = await fetchCategories();
+      setCategories(data);
+    } catch (e) {
+      console.error('Fehler beim Laden der Kategorien:', e);
+    }
+  };
+
+  const getCategoryCount = (cat) => {
+    if (cat === 'Alle') return categories.reduce((sum, c) => sum + c.count, 0);
+    const found = categories.find(c => c.category === cat);
+    return found ? found.count : 0;
+  };
+
+  return (
+    <div>
+      <div className="mb-6">
+        <input
+          type="text"
+          placeholder="Rezepte suchen..."
+          value={search}
+          onChange={e => setSearch(e.target.value)}
+          className="w-full px-4 py-3 border border-gray-300 rounded-xl text-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+        />
+      </div>
+
+      <div className="flex flex-wrap gap-2 mb-6">
+        {ALL_CATEGORIES.map(cat => (
+          <button
+            key={cat}
+            onClick={() => setSelectedCategory(cat)}
+            className={`px-3 py-1.5 rounded-full text-sm font-medium transition-colors ${
+              selectedCategory === cat
+                ? 'bg-blue-600 text-white'
+                : 'bg-white border border-gray-200 text-gray-600 hover:border-blue-300'
+            }`}
+          >
+            {cat} ({getCategoryCount(cat)})
+          </button>
+        ))}
+      </div>
+
+      {loading ? (
+        <div className="text-center py-12 text-gray-400">Laden...</div>
+      ) : recipes.length === 0 ? (
+        <div className="text-center py-12">
+          <p className="text-gray-400 text-lg mb-2">Keine Rezepte gefunden</p>
+          <p className="text-gray-400 text-sm">
+            Füge dein erstes Rezept über TikTok-Links hinzu!
+          </p>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+          {recipes.map(recipe => (
+            <RecipeCard key={recipe.id} recipe={recipe} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}