Aktuellste VErsion

src/pages/AlleNeuigkeiten.tsx

@@ -17,6 +17,25 @@ const AlleNeuigkeitenPage = () => {
   const [news, setNews] = useState<NewsItem[]>([]);
   const [expandedIds, setExpandedIds] = useState<number[]>([]);
   const [activeCardId, setActiveCardId] = useState<number | null>(null);
+  const [selectedTeam, setSelectedTeam] = useState<string>("Alle Teams");
+
+  const defaultImage = "/images/tgl-ball.png";
+
+  //Filtern nach Teams
+  const teams = Array.from(new Set(news.map((n) => n.team).filter(Boolean)));
+
+  const filteredNews = selectedTeam === "Alle Teams" ? news : news.filter((n) => n.team === selectedTeam);
+
+  const groupedNews = filteredNews.reduce((acc: Record<string, NewsItem[]>, item) => {
+    const year = new Date(item.created_at).getFullYear().toString();
+    if (!acc[year]) acc[year] = [];
+    acc[year].push(item);
+    return acc;
+  }, {});
+  
+
+
+
 
   useEffect(() => {
     fetch(`${apiBase}/api/news`)
@@ -31,13 +50,6 @@ const AlleNeuigkeitenPage = () => {
   };
 
 
-  // Gruppieren nach Jahren
-  const groupedNews = news.reduce((acc: Record<string, NewsItem[]>, item) => {
-    const year = new Date(item.created_at).getFullYear().toString();
-    if (!acc[year]) acc[year] = [];
-    acc[year].push(item);
-    return acc;
-  }, {});
 
   //Toggle der Cards
   const toggleExpand = (id: number) => {
@@ -47,8 +59,24 @@ const AlleNeuigkeitenPage = () => {
   }
 
   return (
-    <div className="max-w-5xl mx-auto px-4 py-12">
-      <h1 className="text-3xl font-bold text-center mb-8 text-frog-600">Alle Neuigkeiten</h1>
+          <div className="max-w-5xl mx-auto px-4 py-12">
+            <h1 className="text-3xl font-bold text-center mb-8 text-frog-600">Alle Neuigkeiten</h1>
+
+            <div className="mb-8 flex justify-center">
+        <select
+          value={selectedTeam}
+          onChange={(e) => setSelectedTeam(e.target.value)}
+          className="border border-gray-300 rounded-md px-4 py-2 text-gray-700"
+        >
+          <option value="Alle Teams">Alle Teams</option>
+          {teams.map((team) => (
+            <option key={team} value={team}>
+              {team}
+            </option>
+          ))}
+        </select>
+      </div>
+
 
       {/* News nach Jahren gruppiert */}
       {Object.entries(groupedNews).map(([year, items]) => (
@@ -69,7 +97,7 @@ const AlleNeuigkeitenPage = () => {
                   src={
                     item.image_url
                       ? `${apiBase}${item.image_url}`
-                      : "https://via.placeholder.com/400x300?text=Kein+Bild"
+                      : defaultImage
                   }
                   alt={item.title}
                   className="w-full h-full object-cover"