News Seite angepasst

src/pages/AlleNeuigkeiten.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import ReactMarkdown from "react-markdown";
 
 const apiBase = import.meta.env.VITE_API_URL;
 
@@ -14,6 +15,8 @@ type NewsItem = {
 
 const AlleNeuigkeitenPage = () => {
   const [news, setNews] = useState<NewsItem[]>([]);
+  const [expandedIds, setExpandedIds] = useState<number[]>([]);
+  const [activeCardId, setActiveCardId] = useState<number | null>(null);
 
   useEffect(() => {
     fetch(`${apiBase}/api/news`)
@@ -22,6 +25,12 @@ const AlleNeuigkeitenPage = () => {
       .catch((err) => console.error("Fehler beim Laden der News:", err));
   }, []);
 
+
+  const toggleCard = (id: number) => {
+    setActiveCardId((prev) => (prev === id ? null : id));
+  };
+
+
   // Gruppieren nach Jahren
   const groupedNews = news.reduce((acc: Record<string, NewsItem[]>, item) => {
     const year = new Date(item.created_at).getFullYear().toString();
@@ -30,6 +39,13 @@ const AlleNeuigkeitenPage = () => {
     return acc;
   }, {});
 
+  //Toggle der Cards
+  const toggleExpand = (id: number) => {
+    setExpandedIds((prev) => 
+    prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]
+  );
+  }
+
   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>
@@ -40,20 +56,43 @@ const AlleNeuigkeitenPage = () => {
           <h2 className="text-2xl font-bold text-frog-500 mb-4">{year}</h2>
           <div className="grid md:grid-cols-2 gap-6">
             {items.map((item) => (
-              <Card key={item.id} className="overflow-hidden">
+              <Card
+                key={item.id}
+                className={`overflow-hidden transition-all duration-500 ease-in-out ${
+                  activeCardId === item.id
+                    ? "col-span-2 lg:col-span-2 xl:col-span-2 scale-[1.02] shadow-xl"
+                    : ""
+                }`}
+              >
                 <div className="h-48 overflow-hidden">
-                  <img
-                    src={item.image_url || "https://via.placeholder.com/400x300?text=Kein+Bild"}
-                    alt={item.title}
-                    className="w-full h-full object-cover"
-                  />
+                <img
+                  src={
+                    item.image_url
+                      ? `${apiBase}${item.image_url}`
+                      : "https://via.placeholder.com/400x300?text=Kein+Bild"
+                  }
+                  alt={item.title}
+                  className="w-full h-full object-cover"
+                />
                 </div>
                 <CardHeader>
                   <CardTitle>{item.title}</CardTitle>
                   <CardDescription>{new Date(item.created_at).toLocaleDateString("de-DE")}</CardDescription>
                 </CardHeader>
                 <CardContent>
-                  <p>{item.description}</p>
+                  <div
+                    className={`prose max-w-none text-gray-700 transition-all duration-300 prose-p:my-1 prose-a:text-frog-600 ${
+                      activeCardId === item.id ? "" : "line-clamp-3 overflow-hidden"
+                    }`}
+                  >
+                    <ReactMarkdown>{item.description}</ReactMarkdown>
+                  </div>
+                  <button
+                    onClick={() => toggleCard(item.id)}
+                    className="mt-2 text-frog-600 text-sm font-medium hover:underline"
+                  >
+                    {activeCardId === item.id ? "Weniger anzeigen" : "Weiterlesen"}
+                  </button>
                 </CardContent>
               </Card>
             ))}