updated ResearchLive mock data to include optedIn status and adjusted UI to display participation state for enhanced user interaction feedback

Signed-off-by: Matthias Puchstein <matthias@puchstein.bayern>

src/data/MockResearchLive.ts

@@ -100,19 +100,22 @@ export const citizenScienceProjects = [
         id: 1,
         title: "Globales Traumtagebuch",
         icon: "FaClipboardCheck",
-        description: "Teile deine Träume in der weltweit größten Traumdatenbank und hilf Forschern, Muster zu erkennen."
+        description: "Teile deine Träume in der weltweit größten Traumdatenbank und hilf Forschern, Muster zu erkennen.",
+        optedIn: true
     },
     {
         id: 2,
         title: "Traumkarte",
         icon: "FaGlobeAmericas",
-        description: "Hilf bei der Erstellung einer interaktiven Weltkarte, die zeigt, wie Träume je nach Region variieren."
+        description: "Hilf bei der Erstellung einer interaktiven Weltkarte, die zeigt, wie Träume je nach Region variieren.",
+        optedIn: false
     },
     {
         id: 3,
         title: "30-Tage-Challenge",
         icon: "FaCalendarAlt",
-        description: "Nimm an der 30-Tage-Traumaufzeichnungs-Challenge teil und erhalte personalisierte Analysen."
+        description: "Nimm an der 30-Tage-Traumaufzeichnungs-Challenge teil und erhalte personalisierte Analysen.",
+        optedIn: false
     }
 ];
 

src/pages/dreamarchive/ResearchLive.tsx

@@ -15,19 +15,6 @@ export default function ResearchLive() {
             description="Entdecke laufende Forschungsprojekte, nimm an Studien teil und lerne von führenden Traumforschern aus der ganzen Welt."
         />
 
-        {/* Current Studies */}
-        <div className="mb-12">
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                {mockResearchLive.currentStudies.slice(0, 2).map((study) => (
-                    <StudyCard key={study.id} study={study}/>))}
-            </div>
-
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
-                {mockResearchLive.currentStudies.slice(2, 4).map((study) => (
-                    <StudyCard key={study.id} study={study}/>))}
-            </div>
-        </div>
-
         {/* Citizen Science */}
         <div className="mb-12">
             <DreamyCard color="violet">
@@ -70,10 +57,16 @@ export default function ResearchLive() {
                                 {project.description}
                             </p>
                             <div className="mt-3 text-center">
-                                <button
-                                    className="py-1 px-3 bg-violet-500 hover:bg-violet-600 text-white text-xs rounded-lg transition-colors">
-                                    Beitragen
-                                </button>
+                                {project.optedIn ? (
+                                    <button
+                                        className="py-1 px-3 bg-violet-500 hover:bg-violet-600 text-white text-xs rounded-lg transition-colors">
+                                        Du machst bereits mit!
+                                    </button>) : (
+                                    <button
+                                        className="py-1 px-3 bg-violet-500 hover:bg-violet-600 text-green text-xs rounded-lg transition-colors">
+                                        Beitragen
+                                    </button>
+                                )}
                             </div>
                         </div>);
                     })}
@@ -87,7 +80,21 @@ export default function ResearchLive() {
             </DreamyCard>
         </div>
 
-        {/* Researcher Interviews */}
+
+        {/* Current Studies */}
+        <div className="mb-12">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                {mockResearchLive.currentStudies.slice(0, 2).map((study) => (
+                    <StudyCard key={study.id} study={study}/>))}
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
+                {mockResearchLive.currentStudies.slice(2, 4).map((study) => (
+                    <StudyCard key={study.id} study={study}/>))}
+            </div>
+        </div>
+
+        Researcher Interviews
         <div className="mb-12">
             <SectionHeader title="Forscher-Interviews"/>