mpuchstein/REMind
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

introduced mock data for ResearchLive, UserDreams, and WorldwideEvents pages; replaced hardcoded content in WorldwideEvents with dynamic data rendering for improved flexibility and maintainability

Browse Source 
Signed-off-by: Matthias Puchstein <matthias@puchstein.bayern>
This commit is contained in:
Matthias Puchstein
2025-07-12 13:59:01 +02:00
parent cebad8a7b0
commit b77736b88f
6 changed files with 750 additions and 765 deletions
Download Patch File Download Diff File Expand all files Collapse all files

194
src/data/MockResearchLive.ts Normal file
View File

@@ -0,0 +1,194 @@
/**
* Mock data for the ResearchLive page
* Contains information about current studies, citizen science projects,
* researcher interviews, and upcoming events
*/
// Current Studies data
export const currentStudies = [
{
id: 1,
title: "Traumkontinuität während der Pandemie",
institution: "Universität Zürich, Schweiz",
status: "Aktiv",
statusColor: "green",
participants: {
current: 1245,
target: 2000
},
endDate: "31. Dezember 2024",
description: "Diese Langzeitstudie untersucht, wie sich Träume während und nach der COVID-19-Pandemie verändert haben und ob Traumthemen mit realen Ereignissen korrelieren.",
color: "purple"
},
{
id: 2,
title: "Luzide Träume und Kreativität",
institution: "Stanford University, USA",
status: "Aktiv",
statusColor: "green",
participants: {
current: 876,
target: 1000
},
endDate: "15. März 2025",
description: "Diese Studie untersucht den Zusammenhang zwischen der Fähigkeit, luzide Träume zu erleben, und kreativen Problemlösungsfähigkeiten im Wachzustand.",
color: "blue"
},
{
id: 3,
title: "Traumemotionen und mentale Gesundheit",
institution: "Universität Wien, Österreich",
status: "Fast voll",
statusColor: "yellow",
participants: {
current: 1890,
target: 2000
},
endDate: "30. September 2024",
description: "Diese Studie erforscht die Beziehung zwischen emotionalen Mustern in Träumen und verschiedenen Aspekten der psychischen Gesundheit im Wachzustand.",
color: "emerald"
},
{
id: 4,
title: "Kulturübergreifende Traumsymbole",
institution: "University of Tokyo, Japan",
status: "Aktiv",
statusColor: "green",
participants: {
current: 3456,
target: 10000
},
endDate: "31. Dezember 2025",
description: "Diese globale Studie sammelt Traumsymbole aus verschiedenen Kulturen, um universelle und kulturspezifische Traumelemente zu identifizieren.",
color: "amber"
}
];
// Citizen Science projects data
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."
},
{
id: 2,
title: "Traumkarte",
icon: "FaGlobeAmericas",
description: "Hilf bei der Erstellung einer interaktiven Weltkarte, die zeigt, wie Träume je nach Region variieren."
},
{
id: 3,
title: "30-Tage-Challenge",
icon: "FaCalendarAlt",
description: "Nimm an der 30-Tage-Traumaufzeichnungs-Challenge teil und erhalte personalisierte Analysen."
}
];
// Researcher Interviews data
export const researcherInterviews = [
{
id: 1,
name: "Dr. Sarah Merton",
institution: "Harvard University, USA",
specialty: "Expertin für Traumkognition und neuronale Korrelate des Träumens",
topics: [
"Neueste Erkenntnisse zur Traumkognition",
"Wie das Gehirn Traumnarrative konstruiert",
"Die Rolle von REM-Schlaf bei der Gedächtniskonsolidierung"
],
color: "blue",
videoId: "sarah_merton_interview"
},
{
id: 2,
name: "Prof. Dr. Markus Weber",
institution: "Max-Planck-Institut, Deutschland",
specialty: "Pionier in der Erforschung luzider Träume und Traumkontrolle",
topics: [
"Techniken zur Induktion luzider Träume",
"Therapeutische Anwendungen von Traumkontrolle",
"Ethische Fragen in der Traummanipulation"
],
color: "emerald",
videoId: "markus_weber_interview"
},
{
id: 3,
name: "Dr. Yuki Tanaka",
institution: "Kyoto University, Japan",
specialty: "Spezialistin für kulturelle Traumforschung und vergleichende Traumanalyse",
topics: [
"Kulturelle Unterschiede in Traumsymbolen",
"Einfluss von Mythen und Folklore auf Träume",
"Universelle vs. kulturspezifische Traumelemente"
],
color: "amber",
videoId: "yuki_tanaka_interview"
},
{
id: 4,
name: "Dr. Elena Rodriguez",
institution: "Universidad de Barcelona, Spanien",
specialty: "Forscherin im Bereich Traumtherapie und emotionale Verarbeitung",
topics: [
"Traumbasierte Therapieansätze",
"Verarbeitung traumatischer Erlebnisse im Traum",
"Emotionale Regulation durch gezielte Traumarbeit"
],
color: "rose",
videoId: "elena_rodriguez_interview"
}
];
// Upcoming Events data
export const upcomingEvents = [
{
id: 1,
date: "15. Juli 2024",
title: "Internationale Konferenz für Traumforschung",
location: "Berlin, Deutschland",
type: "Konferenz",
typeColor: "blue"
},
{
id: 2,
date: "3. August 2024",
title: "Workshop: Luzide Träume für Anfänger",
location: "Online",
type: "Workshop",
typeColor: "green"
},
{
id: 3,
date: "22. September 2024",
title: "Symposium: Träume und psychische Gesundheit",
location: "Wien, Österreich",
type: "Symposium",
typeColor: "amber"
},
{
id: 4,
date: "10. Oktober 2024",
title: "Webinar: Neueste Technologien in der Traumforschung",
location: "Online",
type: "Webinar",
typeColor: "purple"
},
{
id: 5,
date: "5. November 2024",
title: "Traumforschung 2025: Ausblick und Trends",
location: "Paris, Frankreich",
type: "Konferenz",
typeColor: "rose"
}
];
export default {
currentStudies,
citizenScienceProjects,
researcherInterviews,
upcomingEvents
};

111
src/data/MockUserDreams.ts Normal file
View File

@@ -0,0 +1,111 @@
/**
* Mock data for the UserDreams page
* Contains user dream profile statistics and comparisons
*/
// User's most frequent dream themes
export const userDreamThemes = [
{theme: "Fliegen", percentage: 32, color: "purple"},
{theme: "Technologie", percentage: 28, color: "blue"},
{theme: "Kreativität", percentage: 24, color: "emerald"}
];
// Global comparison data for dream emotions
export const dreamEmotionsComparison = {
positive: {
global: 42,
user: 58,
color: "blue"
},
negative: {
global: 38,
user: 22,
color: "red"
},
neutral: {
global: 20,
user: 20,
color: "yellow"
}
};
// Dream themes comparison data
export const dreamThemesComparison = {
userTopThemes: [
{theme: "Fliegen", percentage: 32},
{theme: "Technologie", percentage: 28},
{theme: "Kreativität", percentage: 24},
{theme: "Reisen", percentage: 10},
{theme: "Musik", percentage: 6}
],
globalTopThemes: [
{theme: "Fallen", percentage: 28},
{theme: "Verfolgung", percentage: 22},
{theme: "Fliegen", percentage: 18},
{theme: "Prüfungen", percentage: 16},
{theme: "Verlust", percentage: 14}
]
};
// Unique aspects of user's dreams
export const uniqueDreamAspects = [
"Deine Träume enthalten 55% mehr technologische Elemente als der Durchschnitt",
"Du träumst 78% häufiger vom Fliegen als die meisten Menschen",
"Kreative Problemlösung tritt in deinen Träumen 3x häufiger auf"
];
// Dream theme timeline data
export const dreamThemeTimeline = {
timePoints: ["März 2023", "Juni 2023", "Sept 2023", "Dez 2023", "März 2024", "Heute"],
themes: [
{
name: "Fliegen",
color: "#8b5cf6", // purple
dataPoints: [70, 65, 50, 40, 30, 20] // y-values (0-100)
},
{
name: "Technologie",
color: "#3b82f6", // blue
dataPoints: [80, 75, 70, 60, 50, 30]
},
{
name: "Kreativität",
color: "#10b981", // emerald
dataPoints: [85, 80, 75, 65, 55, 35]
}
]
};
// Key insights from dream analysis
export const dreamInsights = [
"Deine Träume vom Fliegen haben im letzten Jahr um 60% zugenommen",
"Technologiebezogene Träume sind seit Dezember 2023 um 40% gestiegen",
"Kreative Elemente in deinen Träumen haben sich verdoppelt",
"Angstträume haben um 45% abgenommen"
];
// Personalized recommendations
export const dreamRecommendations = {
forDreamWork: [
"Experimentiere mit luziden Träumen, da deine Flugträume ein guter Ausgangspunkt sind",
"Führe ein detaillierteres Traumtagebuch, um Muster in deinen technologiebezogenen Träumen zu erkennen",
"Probiere geführte Meditationen vor dem Schlafengehen, um deine kreativen Träume zu verstärken",
"Teile deine Traumgeschichten in der Community, um neue Perspektiven zu gewinnen"
],
basedOnProfile: [
"Entdecke unsere Sammlung von Flugträumen aus verschiedenen Kulturen",
"Nimm an unserem Workshop \"Kreativität im Traum\" teil",
"Teste unsere neue Funktion zur Traumvisualisierung",
"Verbinde dich mit anderen Träumern, die ähnliche Interessen an Technologie und Innovation haben"
]
};
export default {
userDreamThemes,
dreamEmotionsComparison,
dreamThemesComparison,
uniqueDreamAspects,
dreamThemeTimeline,
dreamInsights,
dreamRecommendations
};

106
src/data/MockWorldwideEvents.ts Normal file
View File

@@ -0,0 +1,106 @@
/**
* Mock data for the WorldwideEvents page
* Contains timeline events and detailed event analysis data
*/
// Timeline events data
export const timelineEvents = [
{
year: "2020",
event: "Beginn der COVID-19 Pandemie",
dreamEffect: "40% Anstieg der Traumhäufigkeit während Lockdown",
dreamEffectDetail: "Basierend auf 1.622 Teilnehmern in Italien"
},
{
year: "2021",
event: "Klimawandel-Ereignisse intensivieren sich",
dreamEffect: "23% mehr Träume über Feuer und Flucht",
dreamEffectDetail: "Korreliert mit Waldbränden in Australien und Kalifornien"
},
{
year: "2022",
event: "Beginn des Konflikts in der Ukraine",
dreamEffect: "Erhöhte Angstträume in europäischen Nachbarländern",
dreamEffectDetail: "Besonders in Polen, Rumänien und den baltischen Staaten"
},
{
year: "2023",
event: "Wirtschaftliche Instabilität",
dreamEffect: "Verstärkte Träume über Jobverlust und finanzielle Sorgen",
dreamEffectDetail: "Korreliert mit globaler Wirtschaftskrise"
},
{
year: "2024-2025",
event: "Extreme Wetterereignisse nehmen zu",
dreamEffect: "Verstärkte Wasserträume in von Überschwemmungen betroffenen Regionen",
dreamEffectDetail: "Hitzewellen führten zu fragmentierten Träumen durch veränderte Schlafmuster"
}
];
// Detailed event analysis data
export const detailedEvents = [
{
id: 1,
title: "COVID-19 Pandemie (2020-2022)",
icon: "FaVirus",
color: "purple",
details: [
{
title: "Traumhäufigkeit",
description: "1.622 Teilnehmer in Italien berichteten einen 40% Anstieg der Traumhäufigkeit während des Lockdowns"
},
{
title: "Emotionale Auswirkungen",
description: "Negative Traumemotionen korrelierten direkt mit Schlafqualitätsverschlechterung"
},
{
title: "Häufige Themen",
description: "Isolation, Krankheit, Verlust von Kontrolle"
}
],
summary: "Die COVID-19 Pandemie hatte einen signifikanten Einfluss auf die Traumlandschaft weltweit. Studien zeigen, dass Menschen während der Lockdown-Phasen häufiger und intensiver träumten, wobei negative Emotionen und Ängste dominierten."
},
{
id: 2,
title: "Klimawandel-Ereignisse (2021-2025)",
icon: "FaFire",
color: "emerald",
details: [
{
title: "Waldbrände",
description: "Waldbrände in Australien/Kalifornien führten zu 23% mehr Träumen über Feuer und Flucht"
},
{
title: "Überschwemmungen",
description: "Überschwemmungen in Europa führten zu verstärkten Wasserträumen in betroffenen Regionen"
},
{
title: "Hitzewellen",
description: "Veränderte Schlafmuster durch Hitzewellen führten zu fragmentierten Träumen"
}
],
summary: "Klimawandel-Ereignisse spiegeln sich deutlich in den Traummustern wider. Besonders bemerkenswert ist, dass Menschen in direkt betroffenen Regionen häufiger von den spezifischen Naturkatastrophen träumen, die sie erlebt haben."
},
{
id: 3,
title: "Geopolitische Spannungen (2022-2025)",
icon: "FaFlag",
color: "blue",
details: [
{
title: "Konflikt in der Ukraine",
description: "Erhöhte Angstträume in europäischen Nachbarländern, besonders in Polen, Rumänien und den baltischen Staaten"
},
{
title: "Wirtschaftskrise",
description: "Verstärkte Träume über Jobverlust und finanzielle Sorgen, korrelierend mit globaler wirtschaftlicher Instabilität"
}
],
summary: "Geopolitische Spannungen und Konflikte haben einen messbaren Einfluss auf die Traumlandschaft, wobei die Nähe zum Konfliktgebiet die Intensität der Traumreaktionen beeinflusst. Wirtschaftliche Unsicherheit spiegelt sich in Träumen über finanzielle Sorgen wider."
}
];
export default {
timelineEvents,
detailedEvents
};

619
src/pages/dreamarchive/ResearchLive.tsx
View File

@@ -1,15 +1,6 @@
import {getBackgroundStyle, getTextStyle} from '../../styles/StyleUtils';
import {
FaCalendarAlt,
FaClipboardCheck,
FaFlask,
FaGlobeAmericas,
FaUniversity,
FaUserMd,
FaUsers,
FaVideo
} from 'react-icons/fa';
import {NavLink} from 'react-router-dom';
import {FaCalendarAlt, FaClipboardCheck, FaFlask, FaGlobeAmericas, FaUserMd, FaUsers, FaVideo} from 'react-icons/fa';
import mockResearchLive from '../../data/MockResearchLive';
export default function ResearchLive() {
return (<div className="p-4 pt-24 pb-20 max-w-6xl mx-auto relative overflow-hidden">
@@ -38,163 +29,87 @@ export default function ResearchLive() {
<h2 className="text-2xl font-bold mb-6 dream-title">Aktuelle Studien</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{/* Study 1 */}
<div className="dreamy-card p-6" style={getBackgroundStyle('purple')}>
<div className="flex items-center mb-4">
<div className="p-3 bg-purple-500/20 rounded-full mr-4">
<FaFlask className="text-purple-600 dark:text-purple-400" size={28}/>
{mockResearchLive.currentStudies.slice(0, 2).map((study) => (
<div key={study.id} className="dreamy-card p-6" style={getBackgroundStyle(study.color)}>
<div className="flex items-center mb-4">
<div className={`p-3 bg-${study.color}-500/20 rounded-full mr-4`}>
<FaFlask className={`text-${study.color}-600 dark:text-${study.color}-400`} size={28}/>
</div>
<div>
<h3 className="text-lg font-bold dreamy-text">{study.title}</h3>
<p className="text-xs" style={getTextStyle('muted')}>{study.institution}</p>
</div>
</div>
<div>
<h3 className="text-lg font-bold dreamy-text">Traumkontinuität während der Pandemie</h3>
<p className="text-xs" style={getTextStyle('muted')}>Universität Zürich, Schweiz</p>
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
<div className="flex justify-between mb-2">
<span className="text-sm font-bold">Status:</span>
<span
className={`text-sm bg-${study.statusColor}-100 dark:bg-${study.statusColor}-900 text-${study.statusColor}-800 dark:text-${study.statusColor}-200 px-2 py-0.5 rounded-full`}>{study.status}</span>
</div>
<div className="flex justify-between mb-2">
<span className="text-sm font-bold">Teilnehmer:</span>
<span
className="text-sm">{study.participants.current.toLocaleString()} / {study.participants.target.toLocaleString()}</span>
</div>
<div className="flex justify-between">
<span className="text-sm font-bold">Enddatum:</span>
<span className="text-sm">{study.endDate}</span>
</div>
</div>
<p className="text-sm mb-4">
{study.description}
</p>
<button
className={`w-full py-2 px-4 bg-${study.color}-500 hover:bg-${study.color}-600 text-white rounded-lg transition-colors`}>
Teilnehmen
</button>
</div>
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
<div className="flex justify-between mb-2">
<span className="text-sm font-bold">Status:</span>
<span
className="text-sm bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 px-2 py-0.5 rounded-full">Aktiv</span>
</div>
<div className="flex justify-between mb-2">
<span className="text-sm font-bold">Teilnehmer:</span>
<span className="text-sm">1,245 / 2,000</span>
</div>
<div className="flex justify-between">
<span className="text-sm font-bold">Enddatum:</span>
<span className="text-sm">31. Dezember 2024</span>
</div>
</div>
<p className="text-sm mb-4">
Diese Langzeitstudie untersucht, wie sich Träume während und nach der COVID-19-Pandemie
verändert haben und ob Traumthemen mit realen Ereignissen korrelieren.
</p>
<button
className="w-full py-2 px-4 bg-purple-500 hover:bg-purple-600 text-white rounded-lg transition-colors">
Teilnehmen
</button>
</div>
{/* Study 2 */}
<div className="dreamy-card p-6" style={getBackgroundStyle('blue')}>
<div className="flex items-center mb-4">
<div className="p-3 bg-blue-500/20 rounded-full mr-4">
<FaFlask className="text-blue-600 dark:text-blue-400" size={28}/>
</div>
<div>
<h3 className="text-lg font-bold dreamy-text">Luzide Träume und Kreativität</h3>
<p className="text-xs" style={getTextStyle('muted')}>Stanford University, USA</p>
</div>
</div>
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
<div className="flex justify-between mb-2">
<span className="text-sm font-bold">Status:</span>
<span
className="text-sm bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 px-2 py-0.5 rounded-full">Aktiv</span>
</div>
<div className="flex justify-between mb-2">
<span className="text-sm font-bold">Teilnehmer:</span>
<span className="text-sm">876 / 1,000</span>
</div>
<div className="flex justify-between">
<span className="text-sm font-bold">Enddatum:</span>
<span className="text-sm">15. März 2025</span>
</div>
</div>
<p className="text-sm mb-4">
Diese Studie untersucht den Zusammenhang zwischen der Fähigkeit, luzide Träume zu erleben,
und kreativen Problemlösungsfähigkeiten im Wachzustand.
</p>
<button
className="w-full py-2 px-4 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-colors">
Teilnehmen
</button>
</div>
))}
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
{/* Study 3 */}
<div className="dreamy-card p-6" style={getBackgroundStyle('emerald')}>
<div className="flex items-center mb-4">
<div className="p-3 bg-emerald-500/20 rounded-full mr-4">
<FaFlask className="text-emerald-600 dark:text-emerald-400" size={28}/>
{mockResearchLive.currentStudies.slice(2, 4).map((study) => (
<div key={study.id} className="dreamy-card p-6" style={getBackgroundStyle(study.color)}>
<div className="flex items-center mb-4">
<div className={`p-3 bg-${study.color}-500/20 rounded-full mr-4`}>
<FaFlask className={`text-${study.color}-600 dark:text-${study.color}-400`} size={28}/>
</div>
<div>
<h3 className="text-lg font-bold dreamy-text">{study.title}</h3>
<p className="text-xs" style={getTextStyle('muted')}>{study.institution}</p>
</div>
</div>
<div>
<h3 className="text-lg font-bold dreamy-text">Traumemotionen und mentale Gesundheit</h3>
<p className="text-xs" style={getTextStyle('muted')}>Universität Wien, Österreich</p>
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
<div className="flex justify-between mb-2">
<span className="text-sm font-bold">Status:</span>
<span
className={`text-sm bg-${study.statusColor}-100 dark:bg-${study.statusColor}-900 text-${study.statusColor}-800 dark:text-${study.statusColor}-200 px-2 py-0.5 rounded-full`}>{study.status}</span>
</div>
<div className="flex justify-between mb-2">
<span className="text-sm font-bold">Teilnehmer:</span>
<span
className="text-sm">{study.participants.current.toLocaleString()} / {study.participants.target.toLocaleString()}</span>
</div>
<div className="flex justify-between">
<span className="text-sm font-bold">Enddatum:</span>
<span className="text-sm">{study.endDate}</span>
</div>
</div>
<p className="text-sm mb-4">
{study.description}
</p>
<button
className={`w-full py-2 px-4 bg-${study.color}-500 hover:bg-${study.color}-600 text-white rounded-lg transition-colors`}>
Teilnehmen
</button>
</div>
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
<div className="flex justify-between mb-2">
<span className="text-sm font-bold">Status:</span>
<span
className="text-sm bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 px-2 py-0.5 rounded-full">Fast voll</span>
</div>
<div className="flex justify-between mb-2">
<span className="text-sm font-bold">Teilnehmer:</span>
<span className="text-sm">1,890 / 2,000</span>
</div>
<div className="flex justify-between">
<span className="text-sm font-bold">Enddatum:</span>
<span className="text-sm">30. September 2024</span>
</div>
</div>
<p className="text-sm mb-4">
Diese Studie erforscht die Beziehung zwischen emotionalen Mustern in Träumen und
verschiedenen Aspekten der psychischen Gesundheit im Wachzustand.
</p>
<button
className="w-full py-2 px-4 bg-emerald-500 hover:bg-emerald-600 text-white rounded-lg transition-colors">
Teilnehmen
</button>
</div>
{/* Study 4 */}
<div className="dreamy-card p-6" style={getBackgroundStyle('amber')}>
<div className="flex items-center mb-4">
<div className="p-3 bg-amber-500/20 rounded-full mr-4">
<FaFlask className="text-amber-600 dark:text-amber-400" size={28}/>
</div>
<div>
<h3 className="text-lg font-bold dreamy-text">Kulturübergreifende Traumsymbole</h3>
<p className="text-xs" style={getTextStyle('muted')}>University of Tokyo, Japan</p>
</div>
</div>
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
<div className="flex justify-between mb-2">
<span className="text-sm font-bold">Status:</span>
<span
className="text-sm bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 px-2 py-0.5 rounded-full">Aktiv</span>
</div>
<div className="flex justify-between mb-2">
<span className="text-sm font-bold">Teilnehmer:</span>
<span className="text-sm">3,456 / 10,000</span>
</div>
<div className="flex justify-between">
<span className="text-sm font-bold">Enddatum:</span>
<span className="text-sm">31. Dezember 2025</span>
</div>
</div>
<p className="text-sm mb-4">
Diese globale Studie sammelt Traumsymbole aus verschiedenen Kulturen, um universelle und
kulturspezifische Traumelemente zu identifizieren.
</p>
<button
className="w-full py-2 px-4 bg-amber-500 hover:bg-amber-600 text-white rounded-lg transition-colors">
Teilnehmen
</button>
</div>
))}
</div>
</div>
@@ -212,65 +127,43 @@ export default function ResearchLive() {
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
{/* Project 1 */}
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
<div className="flex justify-center mb-3">
<div className="p-2 bg-violet-500/20 rounded-full">
<FaClipboardCheck className="text-violet-600 dark:text-violet-400" size={20}/>
</div>
</div>
<h4 className="font-bold mb-2 text-center">Globales Traumtagebuch</h4>
<p className="text-sm">
Teile deine Träume in der weltweit größten Traumdatenbank und hilf Forschern, Muster zu
erkennen.
</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>
</div>
</div>
{mockResearchLive.citizenScienceProjects.map((project) => {
// Dynamically determine which icon component to use
let IconComponent;
switch (project.icon) {
case 'FaClipboardCheck':
IconComponent = FaClipboardCheck;
break;
case 'FaGlobeAmericas':
IconComponent = FaGlobeAmericas;
break;
case 'FaCalendarAlt':
IconComponent = FaCalendarAlt;
break;
default:
IconComponent = FaClipboardCheck;
}
{/* Project 2 */}
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
<div className="flex justify-center mb-3">
<div className="p-2 bg-violet-500/20 rounded-full">
<FaGlobeAmericas className="text-violet-600 dark:text-violet-400" size={20}/>
return (
<div key={project.id} className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
<div className="flex justify-center mb-3">
<div className="p-2 bg-violet-500/20 rounded-full">
<IconComponent className="text-violet-600 dark:text-violet-400" size={20}/>
</div>
</div>
<h4 className="font-bold mb-2 text-center">{project.title}</h4>
<p className="text-sm">
{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>
</div>
</div>
</div>
<h4 className="font-bold mb-2 text-center">Traumkarte</h4>
<p className="text-sm">
Hilf bei der Erstellung einer interaktiven Weltkarte, die zeigt, wie Träume je nach
Region variieren.
</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>
</div>
</div>
{/* Project 3 */}
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
<div className="flex justify-center mb-3">
<div className="p-2 bg-violet-500/20 rounded-full">
<FaCalendarAlt className="text-violet-600 dark:text-violet-400" size={20}/>
</div>
</div>
<h4 className="font-bold mb-2 text-center">30-Tage-Challenge</h4>
<p className="text-sm">
Nimm an der 30-Tage-Traumaufzeichnungs-Challenge teil und erhalte personalisierte
Analysen.
</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>
</div>
</div>
);
})}
</div>
<p className="text-sm">
@@ -286,153 +179,81 @@ export default function ResearchLive() {
<h2 className="text-2xl font-bold mb-6 dream-title">Forscher-Interviews</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{/* Interview 1 */}
<div className="dreamy-card p-6" style={getBackgroundStyle('blue')}>
<div className="flex items-start mb-4">
<div className="p-3 bg-blue-500/20 rounded-full mr-4 mt-1">
<FaUserMd className="text-blue-600 dark:text-blue-400" size={28}/>
</div>
<div>
<h3 className="text-lg font-bold dreamy-text">Dr. Sarah Merton</h3>
<p className="text-xs mb-1" style={getTextStyle('muted')}>Harvard University, USA</p>
<p className="text-sm mb-3">Expertin für Traumkognition und neuronale Korrelate des
Träumens</p>
{mockResearchLive.researcherInterviews.slice(0, 2).map((interview) => (
<div key={interview.id} className="dreamy-card p-6" style={getBackgroundStyle(interview.color)}>
<div className="flex items-start mb-4">
<div className={`p-3 bg-${interview.color}-500/20 rounded-full mr-4 mt-1`}>
<FaUserMd className={`text-${interview.color}-600 dark:text-${interview.color}-400`}
size={28}/>
</div>
<div>
<h3 className="text-lg font-bold dreamy-text">{interview.name}</h3>
<p className="text-xs mb-1" style={getTextStyle('muted')}>{interview.institution}</p>
<p className="text-sm mb-3">{interview.specialty}</p>
<div className="relative">
<div
className="aspect-video bg-gray-200 dark:bg-gray-700 rounded-lg flex items-center justify-center">
<FaVideo className="text-gray-400 dark:text-gray-500" size={32}/>
<div className="absolute inset-0 flex items-center justify-center">
<div
className="w-12 h-12 rounded-full bg-blue-500/80 flex items-center justify-center cursor-pointer">
<div className="relative">
<div
className="aspect-video bg-gray-200 dark:bg-gray-700 rounded-lg flex items-center justify-center">
<FaVideo className="text-gray-400 dark:text-gray-500" size={32}/>
<div className="absolute inset-0 flex items-center justify-center">
<div
className="w-0 h-0 border-t-8 border-b-8 border-l-12 border-transparent border-l-white ml-1"></div>
className={`w-12 h-12 rounded-full bg-${interview.color}-500/80 flex items-center justify-center cursor-pointer`}>
<div
className="w-0 h-0 border-t-8 border-b-8 border-l-12 border-transparent border-l-white ml-1"></div>
</div>
</div>
</div>
</div>
</div>
<h4 className="font-bold mt-3 mb-1">Themen im Interview:</h4>
<ul className="list-disc list-inside text-sm space-y-1">
<li>Neueste Erkenntnisse zur Traumkognition</li>
<li>Wie das Gehirn Traumnarrative konstruiert</li>
<li>Die Rolle von REM-Schlaf bei der Gedächtniskonsolidierung</li>
</ul>
<h4 className="font-bold mt-3 mb-1">Themen im Interview:</h4>
<ul className="list-disc list-inside text-sm space-y-1">
{interview.topics.map((topic, index) => (
<li key={index}>{topic}</li>
))}
</ul>
</div>
</div>
</div>
</div>
{/* Interview 2 */}
<div className="dreamy-card p-6" style={getBackgroundStyle('emerald')}>
<div className="flex items-start mb-4">
<div className="p-3 bg-emerald-500/20 rounded-full mr-4 mt-1">
<FaUserMd className="text-emerald-600 dark:text-emerald-400" size={28}/>
</div>
<div>
<h3 className="text-lg font-bold dreamy-text">Prof. Dr. Markus Weber</h3>
<p className="text-xs mb-1" style={getTextStyle('muted')}>Max-Planck-Institut,
Deutschland</p>
<p className="text-sm mb-3">Pionier in der Erforschung luzider Träume und
Traumkontrolle</p>
<div className="relative">
<div
className="aspect-video bg-gray-200 dark:bg-gray-700 rounded-lg flex items-center justify-center">
<FaVideo className="text-gray-400 dark:text-gray-500" size={32}/>
<div className="absolute inset-0 flex items-center justify-center">
<div
className="w-12 h-12 rounded-full bg-emerald-500/80 flex items-center justify-center cursor-pointer">
<div
className="w-0 h-0 border-t-8 border-b-8 border-l-12 border-transparent border-l-white ml-1"></div>
</div>
</div>
</div>
</div>
<h4 className="font-bold mt-3 mb-1">Themen im Interview:</h4>
<ul className="list-disc list-inside text-sm space-y-1">
<li>Techniken zur Induktion luzider Träume</li>
<li>Therapeutische Anwendungen von Traumkontrolle</li>
<li>Ethische Fragen in der Traummanipulation</li>
</ul>
</div>
</div>
</div>
))}
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
{/* Interview 3 */}
<div className="dreamy-card p-6" style={getBackgroundStyle('amber')}>
<div className="flex items-start mb-4">
<div className="p-3 bg-amber-500/20 rounded-full mr-4 mt-1">
<FaUserMd className="text-amber-600 dark:text-amber-400" size={28}/>
</div>
<div>
<h3 className="text-lg font-bold dreamy-text">Dr. Yuki Tanaka</h3>
<p className="text-xs mb-1" style={getTextStyle('muted')}>Kyoto University, Japan</p>
<p className="text-sm mb-3">Spezialistin für kulturelle Traumforschung und vergleichende
Traumanalyse</p>
{mockResearchLive.researcherInterviews.slice(2, 4).map((interview) => (
<div key={interview.id} className="dreamy-card p-6" style={getBackgroundStyle(interview.color)}>
<div className="flex items-start mb-4">
<div className={`p-3 bg-${interview.color}-500/20 rounded-full mr-4 mt-1`}>
<FaUserMd className={`text-${interview.color}-600 dark:text-${interview.color}-400`}
size={28}/>
</div>
<div>
<h3 className="text-lg font-bold dreamy-text">{interview.name}</h3>
<p className="text-xs mb-1" style={getTextStyle('muted')}>{interview.institution}</p>
<p className="text-sm mb-3">{interview.specialty}</p>
<div className="relative">
<div
className="aspect-video bg-gray-200 dark:bg-gray-700 rounded-lg flex items-center justify-center">
<FaVideo className="text-gray-400 dark:text-gray-500" size={32}/>
<div className="absolute inset-0 flex items-center justify-center">
<div
className="w-12 h-12 rounded-full bg-amber-500/80 flex items-center justify-center cursor-pointer">
<div className="relative">
<div
className="aspect-video bg-gray-200 dark:bg-gray-700 rounded-lg flex items-center justify-center">
<FaVideo className="text-gray-400 dark:text-gray-500" size={32}/>
<div className="absolute inset-0 flex items-center justify-center">
<div
className="w-0 h-0 border-t-8 border-b-8 border-l-12 border-transparent border-l-white ml-1"></div>
className={`w-12 h-12 rounded-full bg-${interview.color}-500/80 flex items-center justify-center cursor-pointer`}>
<div
className="w-0 h-0 border-t-8 border-b-8 border-l-12 border-transparent border-l-white ml-1"></div>
</div>
</div>
</div>
</div>
</div>
<h4 className="font-bold mt-3 mb-1">Themen im Interview:</h4>
<ul className="list-disc list-inside text-sm space-y-1">
<li>Kulturelle Unterschiede in Traumsymbolen</li>
<li>Einfluss von Mythen und Folklore auf Träume</li>
<li>Universelle vs. kulturspezifische Traumelemente</li>
</ul>
<h4 className="font-bold mt-3 mb-1">Themen im Interview:</h4>
<ul className="list-disc list-inside text-sm space-y-1">
{interview.topics.map((topic, index) => (
<li key={index}>{topic}</li>
))}
</ul>
</div>
</div>
</div>
</div>
{/* Interview 4 */}
<div className="dreamy-card p-6" style={getBackgroundStyle('rose')}>
<div className="flex items-start mb-4">
<div className="p-3 bg-rose-500/20 rounded-full mr-4 mt-1">
<FaUserMd className="text-rose-600 dark:text-rose-400" size={28}/>
</div>
<div>
<h3 className="text-lg font-bold dreamy-text">Dr. Elena Rodriguez</h3>
<p className="text-xs mb-1" style={getTextStyle('muted')}>Universidad de Barcelona,
Spanien</p>
<p className="text-sm mb-3">Forscherin im Bereich Traumtherapie und emotionale
Verarbeitung</p>
<div className="relative">
<div
className="aspect-video bg-gray-200 dark:bg-gray-700 rounded-lg flex items-center justify-center">
<FaVideo className="text-gray-400 dark:text-gray-500" size={32}/>
<div className="absolute inset-0 flex items-center justify-center">
<div
className="w-12 h-12 rounded-full bg-rose-500/80 flex items-center justify-center cursor-pointer">
<div
className="w-0 h-0 border-t-8 border-b-8 border-l-12 border-transparent border-l-white ml-1"></div>
</div>
</div>
</div>
</div>
<h4 className="font-bold mt-3 mb-1">Themen im Interview:</h4>
<ul className="list-disc list-inside text-sm space-y-1">
<li>Traumbasierte Therapieansätze</li>
<li>Verarbeitung traumatischer Erlebnisse im Traum</li>
<li>Emotionale Regulation durch gezielte Traumarbeit</li>
</ul>
</div>
</div>
</div>
))}
</div>
</div>
@@ -452,61 +273,19 @@ export default function ResearchLive() {
</tr>
</thead>
<tbody>
<tr className="bg-white/10 dark:bg-black/10">
<td className="p-2">15. Juli 2024</td>
<td className="p-2">Internationale Konferenz für Traumforschung</td>
<td className="p-2">Berlin, Deutschland</td>
<td className="p-2">
<span
className="bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-xs px-2 py-0.5 rounded-full">
Konferenz
</span>
</td>
</tr>
<tr>
<td className="p-2">3. August 2024</td>
<td className="p-2">Workshop: Luzide Träume für Anfänger</td>
<td className="p-2">Online</td>
<td className="p-2">
<span
className="bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 text-xs px-2 py-0.5 rounded-full">
Workshop
</span>
</td>
</tr>
<tr className="bg-white/10 dark:bg-black/10">
<td className="p-2">22. September 2024</td>
<td className="p-2">Symposium: Träume und psychische Gesundheit</td>
<td className="p-2">Wien, Österreich</td>
<td className="p-2">
<span
className="bg-amber-100 dark:bg-amber-900 text-amber-800 dark:text-amber-200 text-xs px-2 py-0.5 rounded-full">
Symposium
</span>
</td>
</tr>
<tr>
<td className="p-2">10. Oktober 2024</td>
<td className="p-2">Webinar: Neueste Technologien in der Traumforschung</td>
<td className="p-2">Online</td>
<td className="p-2">
<span
className="bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 text-xs px-2 py-0.5 rounded-full">
Webinar
</span>
</td>
</tr>
<tr className="bg-white/10 dark:bg-black/10">
<td className="p-2">5. November 2024</td>
<td className="p-2">Traumforschung 2025: Ausblick und Trends</td>
<td className="p-2">Paris, Frankreich</td>
<td className="p-2">
<span
className="bg-rose-100 dark:bg-rose-900 text-rose-800 dark:text-rose-200 text-xs px-2 py-0.5 rounded-full">
Konferenz
</span>
</td>
</tr>
{mockResearchLive.upcomingEvents.map((event, index) => (
<tr key={event.id} className={index % 2 === 0 ? "bg-white/10 dark:bg-black/10" : ""}>
<td className="p-2">{event.date}</td>
<td className="p-2">{event.title}</td>
<td className="p-2">{event.location}</td>
<td className="p-2">
<span
className={`bg-${event.typeColor}-100 dark:bg-${event.typeColor}-900 text-${event.typeColor}-800 dark:text-${event.typeColor}-200 text-xs px-2 py-0.5 rounded-full`}>
{event.type}
</span>
</td>
</tr>
))}
</tbody>
</table>
</div>
@@ -519,47 +298,5 @@ export default function ResearchLive() {
</div>
</div>
</div>
{/* Newsletter Signup */}
<div className="mb-12">
<div className="dreamy-card p-6" style={getBackgroundStyle('blue')}>
<div className="flex flex-col md:flex-row items-center">
<div className="mb-4 md:mb-0 md:mr-6 md:w-2/3">
<h3 className="text-xl font-bold mb-2 dreamy-text">Bleib auf dem Laufenden</h3>
<p className="text-sm mb-4">
Abonniere unseren Newsletter, um über neue Studien, Veranstaltungen und Durchbrüche in
der Traumforschung informiert zu bleiben.
</p>
<div className="flex flex-col sm:flex-row">
<input
type="email"
placeholder="Deine E-Mail-Adresse"
className="flex-1 p-2 rounded-lg mb-2 sm:mb-0 sm:mr-2 focus:outline-none"
style={{backgroundColor: 'var(--container)', color: 'var(--text)'}}
/>
<button
className="py-2 px-4 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-colors">
Abonnieren
</button>
</div>
</div>
<div className="md:w-1/3 flex justify-center">
<div className="p-4 bg-blue-500/20 rounded-full">
<FaUniversity className="text-blue-600 dark:text-blue-400" size={48}/>
</div>
</div>
</div>
</div>
</div>
{/* Navigation Links */}
<div className="flex flex-wrap justify-between items-center">
<NavLink to="/dreamarchive/user-dreams" className="dreamy-card p-3 inline-flex items-center">
<span className="mr-2">←</span> Zurück zu Deinen Träumen im Kontext
</NavLink>
<NavLink to="/dreamarchive" className="dreamy-card p-3 inline-flex items-center">
Zurück zur Übersicht <span className="ml-2">→</span>
</NavLink>
</div>
</div>);
}

229
src/pages/dreamarchive/UserDreams.tsx
View File

@@ -2,6 +2,7 @@ import {getBackgroundStyle, getTextStyle} from '../../styles/StyleUtils';
import {FaChartLine, FaRegCommentDots, FaRegLightbulb, FaUser} from 'react-icons/fa';
import {NavLink} from 'react-router-dom';
import {MockUserMap} from '../../data/MockUsers';
import mockUserDreams from '../../data/MockUserDreams';
export default function UserDreams() {
const currentUser = MockUserMap.get(4); // Neo Quantum
@@ -59,42 +60,20 @@ export default function UserDreams() {
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
<h4 className="font-bold mb-2 text-center">Deine häufigsten Traumthemen</h4>
<div className="space-y-2">
<div>
<div className="flex justify-between text-xs mb-1">
<span>Fliegen</span>
<span>32%</span>
</div>
<div
className="relative h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
{mockUserDreams.userDreamThemes.map((item, index) => (
<div key={index}>
<div className="flex justify-between text-xs mb-1">
<span>{item.theme}</span>
<span>{item.percentage}%</span>
</div>
<div
className="absolute top-0 left-0 h-full bg-purple-500 dark:bg-purple-600 rounded-full"
style={{width: '32%'}}></div>
className="relative h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
<div
className={`absolute top-0 left-0 h-full bg-${item.color}-500 dark:bg-${item.color}-600 rounded-full`}
style={{width: `${item.percentage}%`}}></div>
</div>
</div>
</div>
<div>
<div className="flex justify-between text-xs mb-1">
<span>Technologie</span>
<span>28%</span>
</div>
<div
className="relative h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
<div
className="absolute top-0 left-0 h-full bg-blue-500 dark:bg-blue-600 rounded-full"
style={{width: '28%'}}></div>
</div>
</div>
<div>
<div className="flex justify-between text-xs mb-1">
<span>Kreativität</span>
<span>24%</span>
</div>
<div
className="relative h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
<div
className="absolute top-0 left-0 h-full bg-emerald-500 dark:bg-emerald-600 rounded-full"
style={{width: '24%'}}></div>
</div>
</div>
))}
</div>
</div>
</div>
@@ -121,17 +100,19 @@ export default function UserDreams() {
<div className="flex justify-between items-center mb-1">
<span className="text-sm font-bold">Positive Emotionen</span>
<div className="flex items-center">
<span className="text-xs mr-2">Global: 42%</span>
<span className="text-xs font-bold">Du: 58%</span>
<span
className="text-xs mr-2">Global: {mockUserDreams.dreamEmotionsComparison.positive.global}%</span>
<span
className="text-xs font-bold">Du: {mockUserDreams.dreamEmotionsComparison.positive.user}%</span>
</div>
</div>
<div className="relative h-4 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
<div
className="absolute top-0 left-0 h-full bg-gray-400 dark:bg-gray-600 rounded-full"
style={{width: '42%'}}></div>
style={{width: `${mockUserDreams.dreamEmotionsComparison.positive.global}%`}}></div>
<div
className="absolute top-0 left-0 h-full bg-blue-500 dark:bg-blue-600 rounded-full border-r-2 border-white dark:border-gray-900"
style={{width: '58%'}}></div>
className={`absolute top-0 left-0 h-full bg-${mockUserDreams.dreamEmotionsComparison.positive.color}-500 dark:bg-${mockUserDreams.dreamEmotionsComparison.positive.color}-600 rounded-full border-r-2 border-white dark:border-gray-900`}
style={{width: `${mockUserDreams.dreamEmotionsComparison.positive.user}%`}}></div>
</div>
</div>
@@ -139,17 +120,19 @@ export default function UserDreams() {
<div className="flex justify-between items-center mb-1">
<span className="text-sm font-bold">Negative Emotionen</span>
<div className="flex items-center">
<span className="text-xs mr-2">Global: 38%</span>
<span className="text-xs font-bold">Du: 22%</span>
<span
className="text-xs mr-2">Global: {mockUserDreams.dreamEmotionsComparison.negative.global}%</span>
<span
className="text-xs font-bold">Du: {mockUserDreams.dreamEmotionsComparison.negative.user}%</span>
</div>
</div>
<div className="relative h-4 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
<div
className="absolute top-0 left-0 h-full bg-gray-400 dark:bg-gray-600 rounded-full"
style={{width: '38%'}}></div>
style={{width: `${mockUserDreams.dreamEmotionsComparison.negative.global}%`}}></div>
<div
className="absolute top-0 left-0 h-full bg-red-500 dark:bg-red-600 rounded-full border-r-2 border-white dark:border-gray-900"
style={{width: '22%'}}></div>
className={`absolute top-0 left-0 h-full bg-${mockUserDreams.dreamEmotionsComparison.negative.color}-500 dark:bg-${mockUserDreams.dreamEmotionsComparison.negative.color}-600 rounded-full border-r-2 border-white dark:border-gray-900`}
style={{width: `${mockUserDreams.dreamEmotionsComparison.negative.user}%`}}></div>
</div>
</div>
@@ -157,17 +140,19 @@ export default function UserDreams() {
<div className="flex justify-between items-center mb-1">
<span className="text-sm font-bold">Neutrale Emotionen</span>
<div className="flex items-center">
<span className="text-xs mr-2">Global: 20%</span>
<span className="text-xs font-bold">Du: 20%</span>
<span
className="text-xs mr-2">Global: {mockUserDreams.dreamEmotionsComparison.neutral.global}%</span>
<span
className="text-xs font-bold">Du: {mockUserDreams.dreamEmotionsComparison.neutral.user}%</span>
</div>
</div>
<div className="relative h-4 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
<div
className="absolute top-0 left-0 h-full bg-gray-400 dark:bg-gray-600 rounded-full"
style={{width: '20%'}}></div>
style={{width: `${mockUserDreams.dreamEmotionsComparison.neutral.global}%`}}></div>
<div
className="absolute top-0 left-0 h-full bg-yellow-500 dark:bg-yellow-600 rounded-full border-r-2 border-white dark:border-gray-900"
style={{width: '20%'}}></div>
className={`absolute top-0 left-0 h-full bg-${mockUserDreams.dreamEmotionsComparison.neutral.color}-500 dark:bg-${mockUserDreams.dreamEmotionsComparison.neutral.color}-600 rounded-full border-r-2 border-white dark:border-gray-900`}
style={{width: `${mockUserDreams.dreamEmotionsComparison.neutral.user}%`}}></div>
</div>
</div>
</div>
@@ -193,22 +178,18 @@ export default function UserDreams() {
<div className="bg-white/20 dark:bg-black/20 p-3 rounded-lg text-center">
<h4 className="font-bold mb-1 text-sm">Deine Top-Themen</h4>
<ol className="text-xs text-left list-decimal list-inside">
<li>Fliegen (32%)</li>
<li>Technologie (28%)</li>
<li>Kreativität (24%)</li>
<li>Reisen (10%)</li>
<li>Musik (6%)</li>
{mockUserDreams.dreamThemesComparison.userTopThemes.map((item, index) => (
<li key={index}>{item.theme} ({item.percentage}%)</li>
))}
</ol>
</div>
<div className="bg-white/20 dark:bg-black/20 p-3 rounded-lg text-center">
<h4 className="font-bold mb-1 text-sm">Globale Top-Themen</h4>
<ol className="text-xs text-left list-decimal list-inside">
<li>Fallen (28%)</li>
<li>Verfolgung (22%)</li>
<li>Fliegen (18%)</li>
<li>Prüfungen (16%)</li>
<li>Verlust (14%)</li>
{mockUserDreams.dreamThemesComparison.globalTopThemes.map((item, index) => (
<li key={index}>{item.theme} ({item.percentage}%)</li>
))}
</ol>
</div>
</div>
@@ -217,10 +198,9 @@ export default function UserDreams() {
<h4 className="font-bold mb-2 text-sm text-center">Einzigartige Aspekte deiner
Träume</h4>
<ul className="text-xs list-disc list-inside space-y-1">
<li>Deine Träume enthalten 55% mehr technologische Elemente als der Durchschnitt
</li>
<li>Du träumst 78% häufiger vom Fliegen als die meisten Menschen</li>
<li>Kreative Problemlösung tritt in deinen Träumen 3x häufiger auf</li>
{mockUserDreams.uniqueDreamAspects.map((aspect, index) => (
<li key={index}>{aspect}</li>
))}
</ul>
</div>
</div>
@@ -255,30 +235,12 @@ export default function UserDreams() {
className="absolute bottom-0 left-0 right-0 h-px bg-gray-300 dark:bg-gray-600"></div>
<div className="absolute bottom-0 left-0 right-0 flex justify-between text-xs"
style={getTextStyle('muted')}>
<div className="text-center">
<div className="absolute bottom-0 h-2 w-px bg-gray-300 dark:bg-gray-600"></div>
<div className="mt-2">März 2023</div>
</div>
<div className="text-center">
<div className="absolute bottom-0 h-2 w-px bg-gray-300 dark:bg-gray-600"></div>
<div className="mt-2">Juni 2023</div>
</div>
<div className="text-center">
<div className="absolute bottom-0 h-2 w-px bg-gray-300 dark:bg-gray-600"></div>
<div className="mt-2">Sept 2023</div>
</div>
<div className="text-center">
<div className="absolute bottom-0 h-2 w-px bg-gray-300 dark:bg-gray-600"></div>
<div className="mt-2">Dez 2023</div>
</div>
<div className="text-center">
<div className="absolute bottom-0 h-2 w-px bg-gray-300 dark:bg-gray-600"></div>
<div className="mt-2">März 2024</div>
</div>
<div className="text-center">
<div className="absolute bottom-0 h-2 w-px bg-gray-300 dark:bg-gray-600"></div>
<div className="mt-2">Heute</div>
</div>
{mockUserDreams.dreamThemeTimeline.timePoints.map((timePoint, index) => (
<div className="text-center" key={index}>
<div className="absolute bottom-0 h-2 w-px bg-gray-300 dark:bg-gray-600"></div>
<div className="mt-2">{timePoint}</div>
</div>
))}
</div>
{/* Y-Axis (Percentage) */}
@@ -313,50 +275,35 @@ export default function UserDreams() {
</div>
{/* Data Lines */}
{/* Fliegen (purple) */}
<svg className="absolute inset-0" viewBox="0 0 100 100" preserveAspectRatio="none">
<polyline
points="0,70 20,65 40,50 60,40 80,30 100,20"
fill="none"
stroke="#8b5cf6"
strokeWidth="2"
/>
</svg>
{mockUserDreams.dreamThemeTimeline.themes.map((theme, index) => {
// Convert dataPoints to SVG points format
// Each point is a percentage of the way across (x) and a percentage of the way down (y)
const points = theme.dataPoints.map((point, i) => {
const x = (i / (theme.dataPoints.length - 1)) * 100;
return `${x},${point}`;
}).join(' ');
{/* Technologie (blue) */}
<svg className="absolute inset-0" viewBox="0 0 100 100" preserveAspectRatio="none">
<polyline
points="0,80 20,75 40,70 60,60 80,50 100,30"
fill="none"
stroke="#3b82f6"
strokeWidth="2"
/>
</svg>
{/* Kreativität (green) */}
<svg className="absolute inset-0" viewBox="0 0 100 100" preserveAspectRatio="none">
<polyline
points="0,85 20,80 40,75 60,65 80,55 100,35"
fill="none"
stroke="#10b981"
strokeWidth="2"
/>
</svg>
return (
<svg key={index} className="absolute inset-0" viewBox="0 0 100 100"
preserveAspectRatio="none">
<polyline
points={points}
fill="none"
stroke={theme.color}
strokeWidth="2"
/>
</svg>
);
})}
{/* Legend */}
<div className="absolute top-0 right-0 bg-white/50 dark:bg-black/50 p-2 rounded-lg">
<div className="flex items-center mb-1">
<div className="w-3 h-3 bg-purple-500 mr-2"></div>
<span className="text-xs">Fliegen</span>
</div>
<div className="flex items-center mb-1">
<div className="w-3 h-3 bg-blue-500 mr-2"></div>
<span className="text-xs">Technologie</span>
</div>
<div className="flex items-center">
<div className="w-3 h-3 bg-emerald-500 mr-2"></div>
<span className="text-xs">Kreativität</span>
</div>
{mockUserDreams.dreamThemeTimeline.themes.map((theme, index) => (
<div key={index} className="flex items-center mb-1">
<div className="w-3 h-3 mr-2" style={{backgroundColor: theme.color}}></div>
<span className="text-xs">{theme.name}</span>
</div>
))}
</div>
</div>
</div>
@@ -365,10 +312,9 @@ export default function UserDreams() {
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg mb-4">
<h4 className="font-bold mb-2">Schlüsselerkenntnisse</h4>
<ul className="list-disc list-inside text-sm space-y-1">
<li>Deine Träume vom Fliegen haben im letzten Jahr um 60% zugenommen</li>
<li>Technologiebezogene Träume sind seit Dezember 2023 um 40% gestiegen</li>
<li>Kreative Elemente in deinen Träumen haben sich verdoppelt</li>
<li>Angstträume haben um 45% abgenommen</li>
{mockUserDreams.dreamInsights.map((insight, index) => (
<li key={index}>{insight}</li>
))}
</ul>
</div>
@@ -388,27 +334,18 @@ export default function UserDreams() {
<div className="dreamy-card p-6" style={getBackgroundStyle('violet')}>
<h3 className="text-lg font-bold mb-3 dreamy-text">Für deine Traumarbeit</h3>
<ul className="list-disc list-inside text-sm space-y-2">
<li>Experimentiere mit luziden Träumen, da deine Flugträume ein guter Ausgangspunkt sind
</li>
<li>Führe ein detaillierteres Traumtagebuch, um Muster in deinen technologiebezogenen
Träumen zu erkennen
</li>
<li>Probiere geführte Meditationen vor dem Schlafengehen, um deine kreativen Träume zu
verstärken
</li>
<li>Teile deine Traumgeschichten in der Community, um neue Perspektiven zu gewinnen</li>
{mockUserDreams.dreamRecommendations.forDreamWork.map((recommendation, index) => (
<li key={index}>{recommendation}</li>
))}
</ul>
</div>
<div className="dreamy-card p-6" style={getBackgroundStyle('amber')}>
<h3 className="text-lg font-bold mb-3 dreamy-text">Basierend auf deinem Profil</h3>
<ul className="list-disc list-inside text-sm space-y-2">
<li>Entdecke unsere Sammlung von Flugträumen aus verschiedenen Kulturen</li>
<li>Nimm an unserem Workshop "Kreativität im Traum" teil</li>
<li>Teste unsere neue Funktion zur Traumvisualisierung</li>
<li>Verbinde dich mit anderen Träumern, die ähnliche Interessen an Technologie und
Innovation haben
</li>
{mockUserDreams.dreamRecommendations.basedOnProfile.map((recommendation, index) => (
<li key={index}>{recommendation}</li>
))}
</ul>
</div>
</div>

256
src/pages/dreamarchive/WorldwideEvents.tsx
View File

@@ -1,6 +1,7 @@
import {getBackgroundStyle, getTextStyle} from '../../styles/StyleUtils';
import {FaFire, FaFlag, FaVirus} from 'react-icons/fa';
import {NavLink} from 'react-router-dom';
import mockWorldwideEvents from '../../data/MockWorldwideEvents';
export default function WorldwideEvents() {
return (<div className="p-4 pt-24 pb-20 max-w-6xl mx-auto relative overflow-hidden">
@@ -34,96 +35,45 @@ export default function WorldwideEvents() {
{/* Timeline Items */}
<div className="relative z-10">
{/* 2020 */}
<div className="mb-12 flex items-center">
<div className="w-1/2 pr-8 text-right">
<h3 className="text-xl font-bold mb-2 dreamy-text">2020</h3>
<p className="text-sm" style={getTextStyle()}>Beginn der COVID-19 Pandemie</p>
</div>
<div className="absolute left-1/2 transform -translate-x-1/2 w-6 h-6 rounded-full"
style={{background: 'var(--accent-gradient)'}}></div>
<div className="w-1/2 pl-8">
<div className="dreamy-card p-4">
<p className="text-sm mb-2" style={getTextStyle()}>40% Anstieg der Traumhäufigkeit
während Lockdown</p>
<p className="text-xs" style={getTextStyle('muted')}>Basierend auf 1.622 Teilnehmern
in Italien</p>
</div>
</div>
</div>
{mockWorldwideEvents.timelineEvents.map((event, index) => {
const isEven = index % 2 === 0;
const isLast = index === mockWorldwideEvents.timelineEvents.length - 1;
{/* 2021 */}
<div className="mb-12 flex items-center">
<div className="w-1/2 pr-8 text-right">
<div className="dreamy-card p-4">
<p className="text-sm mb-2" style={getTextStyle()}>23% mehr Träume über Feuer und
Flucht</p>
<p className="text-xs" style={getTextStyle('muted')}>Korreliert mit Waldbränden in
Australien und Kalifornien</p>
return (
<div key={index} className={`${!isLast ? 'mb-12' : ''} flex items-center`}>
<div className="w-1/2 pr-8 text-right">
{isEven ? (
<>
<h3 className="text-xl font-bold mb-2 dreamy-text">{event.year}</h3>
<p className="text-sm" style={getTextStyle()}>{event.event}</p>
</>
) : (
<div className="dreamy-card p-4">
<p className="text-sm mb-2" style={getTextStyle()}>{event.dreamEffect}</p>
<p className="text-xs"
style={getTextStyle('muted')}>{event.dreamEffectDetail}</p>
</div>
)}
</div>
<div className="absolute left-1/2 transform -translate-x-1/2 w-6 h-6 rounded-full"
style={{background: 'var(--accent-gradient)'}}></div>
<div className="w-1/2 pl-8">
{isEven ? (
<div className="dreamy-card p-4">
<p className="text-sm mb-2" style={getTextStyle()}>{event.dreamEffect}</p>
<p className="text-xs"
style={getTextStyle('muted')}>{event.dreamEffectDetail}</p>
</div>
) : (
<>
<h3 className="text-xl font-bold mb-2 dreamy-text">{event.year}</h3>
<p className="text-sm" style={getTextStyle()}>{event.event}</p>
</>
)}
</div>
</div>
</div>
<div className="absolute left-1/2 transform -translate-x-1/2 w-6 h-6 rounded-full"
style={{background: 'var(--accent-gradient)'}}></div>
<div className="w-1/2 pl-8">
<h3 className="text-xl font-bold mb-2 dreamy-text">2021</h3>
<p className="text-sm" style={getTextStyle()}>Klimawandel-Ereignisse intensivieren
sich</p>
</div>
</div>
{/* 2022 */}
<div className="mb-12 flex items-center">
<div className="w-1/2 pr-8 text-right">
<h3 className="text-xl font-bold mb-2 dreamy-text">2022</h3>
<p className="text-sm" style={getTextStyle()}>Beginn des Konflikts in der Ukraine</p>
</div>
<div className="absolute left-1/2 transform -translate-x-1/2 w-6 h-6 rounded-full"
style={{background: 'var(--accent-gradient)'}}></div>
<div className="w-1/2 pl-8">
<div className="dreamy-card p-4">
<p className="text-sm mb-2" style={getTextStyle()}>Erhöhte Angstträume in
europäischen Nachbarländern</p>
<p className="text-xs" style={getTextStyle('muted')}>Besonders in Polen, Rumänien
und den baltischen Staaten</p>
</div>
</div>
</div>
{/* 2023 */}
<div className="mb-12 flex items-center">
<div className="w-1/2 pr-8 text-right">
<div className="dreamy-card p-4">
<p className="text-sm mb-2" style={getTextStyle()}>Verstärkte Träume über Jobverlust
und finanzielle Sorgen</p>
<p className="text-xs" style={getTextStyle('muted')}>Korreliert mit globaler
Wirtschaftskrise</p>
</div>
</div>
<div className="absolute left-1/2 transform -translate-x-1/2 w-6 h-6 rounded-full"
style={{background: 'var(--accent-gradient)'}}></div>
<div className="w-1/2 pl-8">
<h3 className="text-xl font-bold mb-2 dreamy-text">2023</h3>
<p className="text-sm" style={getTextStyle()}>Wirtschaftliche Instabilität</p>
</div>
</div>
{/* 2024-2025 */}
<div className="flex items-center">
<div className="w-1/2 pr-8 text-right">
<h3 className="text-xl font-bold mb-2 dreamy-text">2024-2025</h3>
<p className="text-sm" style={getTextStyle()}>Extreme Wetterereignisse nehmen zu</p>
</div>
<div className="absolute left-1/2 transform -translate-x-1/2 w-6 h-6 rounded-full"
style={{background: 'var(--accent-gradient)'}}></div>
<div className="w-1/2 pl-8">
<div className="dreamy-card p-4">
<p className="text-sm mb-2" style={getTextStyle()}>Verstärkte Wasserträume in von
Überschwemmungen betroffenen Regionen</p>
<p className="text-xs" style={getTextStyle('muted')}>Hitzewellen führten zu
fragmentierten Träumen durch veränderte Schlafmuster</p>
</div>
</div>
</div>
);
})}
</div>
</div>
</div>
@@ -132,101 +82,51 @@ export default function WorldwideEvents() {
<div className="mb-12">
<h2 className="text-2xl font-bold mb-6 dream-title">Detaillierte Ereignisanalyse</h2>
{/* COVID-19 Section */}
<div className="dreamy-card mb-8 p-6" style={getBackgroundStyle('purple')}>
<div className="flex flex-col md:flex-row items-center mb-4">
<div className="p-3 bg-purple-500/20 rounded-full mb-4 md:mb-0 md:mr-4">
<FaVirus className="text-purple-600 dark:text-purple-400" size={32}/>
</div>
<h3 className="text-xl font-bold dreamy-text">COVID-19 Pandemie (2020-2022)</h3>
</div>
{mockWorldwideEvents.detailedEvents.map((event, index) => {
// Dynamically determine which icon component to use
let IconComponent;
switch (event.icon) {
case 'FaVirus':
IconComponent = FaVirus;
break;
case 'FaFire':
IconComponent = FaFire;
break;
case 'FaFlag':
IconComponent = FaFlag;
break;
default:
IconComponent = FaVirus;
}
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
<h4 className="font-bold mb-2">Traumhäufigkeit</h4>
<p className="text-sm">1.622 Teilnehmer in Italien berichteten einen 40% Anstieg der
Traumhäufigkeit während des Lockdowns</p>
</div>
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
<h4 className="font-bold mb-2">Emotionale Auswirkungen</h4>
<p className="text-sm">Negative Traumemotionen korrelierten direkt mit
Schlafqualitätsverschlechterung</p>
</div>
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
<h4 className="font-bold mb-2">Häufige Themen</h4>
<p className="text-sm">Isolation, Krankheit, Verlust von Kontrolle</p>
</div>
</div>
const isLast = index === mockWorldwideEvents.detailedEvents.length - 1;
<p className="text-sm">
Die COVID-19 Pandemie hatte einen signifikanten Einfluss auf die Traumlandschaft weltweit.
Studien zeigen, dass Menschen während der Lockdown-Phasen häufiger und intensiver träumten,
wobei negative Emotionen und Ängste dominierten.
</p>
</div>
return (
<div key={event.id} className={`dreamy-card ${!isLast ? 'mb-8' : ''} p-6`}
style={getBackgroundStyle(event.color)}>
<div className="flex flex-col md:flex-row items-center mb-4">
<div className={`p-3 bg-${event.color}-500/20 rounded-full mb-4 md:mb-0 md:mr-4`}>
<IconComponent className={`text-${event.color}-600 dark:text-${event.color}-400`}
size={32}/>
</div>
<h3 className="text-xl font-bold dreamy-text">{event.title}</h3>
</div>
{/* Climate Change Section */}
<div className="dreamy-card mb-8 p-6" style={getBackgroundStyle('emerald')}>
<div className="flex flex-col md:flex-row items-center mb-4">
<div className="p-3 bg-emerald-500/20 rounded-full mb-4 md:mb-0 md:mr-4">
<FaFire className="text-emerald-600 dark:text-emerald-400" size={32}/>
</div>
<h3 className="text-xl font-bold dreamy-text">Klimawandel-Ereignisse (2021-2025)</h3>
</div>
<div className={`grid grid-cols-1 md:grid-cols-${event.details.length} gap-4 mb-4`}>
{event.details.map((detail, detailIndex) => (
<div key={detailIndex} className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
<h4 className="font-bold mb-2">{detail.title}</h4>
<p className="text-sm">{detail.description}</p>
</div>
))}
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
<h4 className="font-bold mb-2">Waldbrände</h4>
<p className="text-sm">Waldbrände in Australien/Kalifornien führten zu 23% mehr Träumen über
Feuer und Flucht</p>
<p className="text-sm">
{event.summary}
</p>
</div>
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
<h4 className="font-bold mb-2">Überschwemmungen</h4>
<p className="text-sm">Überschwemmungen in Europa führten zu verstärkten Wasserträumen in
betroffenen Regionen</p>
</div>
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
<h4 className="font-bold mb-2">Hitzewellen</h4>
<p className="text-sm">Veränderte Schlafmuster durch Hitzewellen führten zu fragmentierten
Träumen</p>
</div>
</div>
<p className="text-sm">
Klimawandel-Ereignisse spiegeln sich deutlich in den Traummustern wider. Besonders bemerkenswert
ist, dass Menschen in direkt betroffenen Regionen häufiger von den spezifischen
Naturkatastrophen träumen, die sie erlebt haben.
</p>
</div>
{/* Geopolitical Tensions Section */}
<div className="dreamy-card p-6" style={getBackgroundStyle('blue')}>
<div className="flex flex-col md:flex-row items-center mb-4">
<div className="p-3 bg-blue-500/20 rounded-full mb-4 md:mb-0 md:mr-4">
<FaFlag className="text-blue-600 dark:text-blue-400" size={32}/>
</div>
<h3 className="text-xl font-bold dreamy-text">Geopolitische Spannungen (2022-2025)</h3>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
<h4 className="font-bold mb-2">Konflikt in der Ukraine</h4>
<p className="text-sm">Erhöhte Angstträume in europäischen Nachbarländern, besonders in
Polen, Rumänien und den baltischen Staaten</p>
</div>
<div className="bg-white/20 dark:bg-black/20 p-4 rounded-lg">
<h4 className="font-bold mb-2">Wirtschaftskrise</h4>
<p className="text-sm">Verstärkte Träume über Jobverlust und finanzielle Sorgen,
korrelierend mit globaler wirtschaftlicher Instabilität</p>
</div>
</div>
<p className="text-sm">
Geopolitische Spannungen und Konflikte haben einen messbaren Einfluss auf die Traumlandschaft,
wobei die Nähe zum Konfliktgebiet die Intensität der Traumreaktionen beeinflusst.
Wirtschaftliche Unsicherheit spiegelt sich in Träumen über finanzielle Sorgen wider.
</p>
</div>
);
})}
</div>
{/* Navigation Links */}