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

removed NavigationLinks component and its usage across DreamArchive pages; replaced redundant hero and section headers with reusable components (HeroSection, SectionHeader, etc.) for improved maintainability and reduced code duplication

Browse Source 
Signed-off-by: Matthias Puchstein <matthias@puchstein.bayern>
This commit is contained in:
Matthias Puchstein
2025-07-12 15:46:21 +02:00
parent 184d31c07f
commit d6e6b1ccb4
16 changed files with 142 additions and 266 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/dreamarchive/DreamyCard.tsx
View File

@@ -1,4 +1,5 @@
import React, {ReactNode} from 'react';
import type {ReactNode} from 'react';
import React from 'react';
import {getBackgroundStyle} from '../../styles/StyleUtils';
interface DreamyCardProps {
@@ -24,4 +25,4 @@ export const DreamyCard: React.FC<DreamyCardProps> = ({
);
};
export default DreamyCard;
export default DreamyCard;

10
src/components/dreamarchive/HeroSection.tsx
View File

@@ -1,19 +1,15 @@
import React from 'react';
interface HeroSectionProps {
title: string;
subtitle: string;
title?: string;
subtitle?: string;
containerTitle: string;
description: string;
}
export const HeroSection: React.FC<HeroSectionProps> = ({title, subtitle, containerTitle, description}) => {
export const HeroSection: React.FC<HeroSectionProps> = ({containerTitle, description}) => {
return (
<div className="text-center mb-12 sm:mb-16 relative z-10">
<div className="animate-pulse flex flex-col items-center mb-8 sm:mb-12">
<h1 className="text-3xl sm:text-4xl md:text-5xl font-bold mb-4 dream-title">{title}</h1>
<p className="text-lg sm:text-xl dreamy-text">{subtitle}</p>
</div>
<div
className="dream-container floating max-w-3xl mx-auto backdrop-blur-sm bg-white/10 dark:bg-white/5 rounded-3xl p-4 sm:p-6 md:p-8"
style={{animationDelay: '0.2s'}}>

5
src/components/dreamarchive/IconWithBackground.tsx
View File

@@ -1,4 +1,5 @@
import React, {ReactElement} from 'react';
import type {ReactElement} from 'react';
import React from 'react';
interface IconWithBackgroundProps {
icon: ReactElement;
@@ -18,7 +19,7 @@ export const IconWithBackground: React.FC<IconWithBackgroundProps> = ({
{React.cloneElement(icon, {
className: `text-${color}-600 dark:text-${color}-400`,
size: size
})}
} as React.SVGProps<SVGSVGElement>)}
</div>
);
};

32
src/components/dreamarchive/NavigationLinks.tsx
View File

@@ -1,32 +0,0 @@
import React from 'react';
import {NavLink} from 'react-router-dom';
interface NavigationLinksProps {
previousLink?: {
to: string;
text: string;
};
nextLink?: {
to: string;
text: string;
};
}
export const NavigationLinks: React.FC<NavigationLinksProps> = ({previousLink, nextLink}) => {
return (
<div className="flex flex-wrap justify-between items-center">
{previousLink && (
<NavLink to={previousLink.to} className="dreamy-card p-3 inline-flex items-center">
<span className="mr-2">←</span> {previousLink.text}
</NavLink>
)}
{nextLink && (
<NavLink to={nextLink.to} className="dreamy-card p-3 inline-flex items-center">
{nextLink.text} <span className="ml-2">→</span>
</NavLink>
)}
</div>
);
};
export default NavigationLinks;

4
src/components/dreamarchive/ResearcherInterviewCard.tsx
View File

@@ -11,7 +11,7 @@ interface ResearcherInterviewCardProps {
institution: string;
specialty: string;
topics: string[];
color: string;
color: 'purple' | 'blue' | 'violet' | 'emerald' | 'amber' | 'rose' | 'pink-red' | 'cta';
videoId: string;
};
}
@@ -45,4 +45,4 @@ export const ResearcherInterviewCard: React.FC<ResearcherInterviewCardProps> = (
);
};
export default ResearcherInterviewCard;
export default ResearcherInterviewCard;

4
src/components/dreamarchive/StudyCard.tsx
View File

@@ -16,7 +16,7 @@ interface StudyCardProps {
};
endDate: string;
description: string;
color: string;
color: 'purple' | 'blue' | 'violet' | 'emerald' | 'amber' | 'rose' | 'pink-red' | 'cta';
};
}
@@ -68,4 +68,4 @@ export const StudyCard: React.FC<StudyCardProps> = ({study}) => {
);
};
export default StudyCard;
export default StudyCard;

45
src/data/MockResearchLive.ts
View File

@@ -4,8 +4,38 @@
* researcher interviews, and upcoming events
*/
// Define color type to match component requirements
type ColorType = 'purple' | 'blue' | 'violet' | 'emerald' | 'amber' | 'rose' | 'pink-red' | 'cta';
// Define study type
interface Study {
id: number;
title: string;
institution: string;
status: string;
statusColor: string;
participants: {
current: number;
target: number;
};
endDate: string;
description: string;
color: ColorType;
}
// Define researcher interview type
interface ResearcherInterview {
id: number;
name: string;
institution: string;
specialty: string;
topics: string[];
color: ColorType;
videoId: string;
}
// Current Studies data
export const currentStudies = [
export const currentStudies: Study[] = [
{
id: 1,
title: "Traumkontinuität während der Pandemie",
@@ -87,7 +117,7 @@ export const citizenScienceProjects = [
];
// Researcher Interviews data
export const researcherInterviews = [
export const researcherInterviews: ResearcherInterview[] = [
{
id: 1,
name: "Dr. Sarah Merton",
@@ -186,9 +216,18 @@ export const upcomingEvents = [
}
];
// Define the type for the exported object
interface MockResearchLiveData {
currentStudies: Study[];
citizenScienceProjects: any[]; // Using any for now as we haven't defined a specific type
researcherInterviews: ResearcherInterview[];
upcomingEvents: any[]; // Using any for now as we haven't defined a specific type
}
// Export with type information
export default {
currentStudies,
citizenScienceProjects,
researcherInterviews,
upcomingEvents
};
} as MockResearchLiveData;

3
src/pages/Home.tsx
View File

@@ -25,8 +25,7 @@ export default function Home() {
).slice(0, 5);
return (
<div className="p-4 dream-container backdrop-blur-md bg-opacity-30"
style={{backgroundColor: 'transparent', boxShadow: '0 10px 30px var(--shadow)'}}>
<div className="page p-4 space-y-6">
{/* Welcome Card */}
<div className={getCardStyle().className}
style={getCardStyle()}>

15
src/pages/dreamarchive/CulturalLandscapes.tsx
View File

@@ -1,6 +1,5 @@
import {getBackgroundStyle, getTextStyle} from '../../styles/StyleUtils';
import {FaGlobeAfrica, FaGlobeAsia, FaGlobeEurope, FaHandshake} from 'react-icons/fa';
import {NavLink} from 'react-router-dom';
export default function CulturalLandscapes() {
return (<div className="p-4 pt-24 pb-20 max-w-6xl mx-auto relative overflow-hidden">
@@ -288,19 +287,5 @@ export default function CulturalLandscapes() {
</p>
</div>
</div>
{/* Navigation Links */}
<div className="flex flex-wrap justify-between items-center">
<NavLink to="/dreamarchive/worldwide-events"
className="dreamy-card rounded-xl p-4 inline-flex items-center no-underline"
style={getBackgroundStyle('blue')}>
<span className="mr-2">←</span> Zurück zu Weltweiten Ereignissen
</NavLink>
<NavLink to="/dreamarchive/living-conditions"
className="dreamy-card rounded-xl p-4 inline-flex items-center no-underline"
style={getBackgroundStyle('emerald')}>
Weiter zu Lebensbedingungen & Traumqualität <span className="ml-2">→</span>
</NavLink>
</div>
</div>);
}

4
src/pages/dreamarchive/DreamArchiveIndex.tsx
View File

@@ -7,10 +7,6 @@ export default function DreamArchiveIndex() {
<div className="p-4 pt-24 pb-20 max-w-6xl mx-auto relative overflow-hidden">
{/* Hero Section */}
<div className="text-center mb-12 sm:mb-16 relative z-10">
<div className="animate-pulse flex flex-col items-center mb-8 sm:mb-12">
<h1 className="text-3xl sm:text-4xl md:text-5xl font-bold mb-4 dream-title">Dream Archive</h1>
<p className="text-lg sm:text-xl dreamy-text">Globale Traumforschung und Datenvisualisierung</p>
</div>
<div
className="dream-container floating max-w-3xl mx-auto backdrop-blur-sm bg-white/10 dark:bg-white/5 rounded-3xl p-4 sm:p-6 md:p-8"
style={{animationDelay: '0.2s'}}>

109
src/pages/dreamarchive/LivingConditions.tsx
View File

@@ -1,41 +1,26 @@
import {getBackgroundStyle} from '../../styles/StyleUtils';
import {FaCity, FaGraduationCap, FaLightbulb, FaMoneyBillWave, FaSmog, FaVolumeUp} from 'react-icons/fa';
import {NavLink} from 'react-router-dom';
import HeroSection from '../../components/dreamarchive/HeroSection';
import SectionHeader from '../../components/dreamarchive/SectionHeader';
import DreamyCard from '../../components/dreamarchive/DreamyCard';
import IconWithBackground from '../../components/dreamarchive/IconWithBackground';
export default function LivingConditions() {
return (<div className="p-4 pt-24 pb-20 max-w-6xl mx-auto relative overflow-hidden">
{/* Hero Section */}
<div className="text-center mb-12 sm:mb-16 relative z-10">
<div className="animate-pulse flex flex-col items-center mb-8 sm:mb-12">
<h1 className="text-3xl sm:text-4xl md:text-5xl font-bold mb-4 dream-title">Lebensbedingungen &
Traumqualität</h1>
<p className="text-lg sm:text-xl dreamy-text">Der Einfluss von Umgebung und Lebensumständen auf
unsere Träume</p>
</div>
<div
className="dream-container floating max-w-3xl mx-auto backdrop-blur-sm bg-white/10 dark:bg-white/5 rounded-3xl p-4 sm:p-6 md:p-8"
style={{animationDelay: '0.2s'}}>
<div className="flex flex-col sm:flex-row justify-center items-center mb-3 sm:mb-4">
<h2 className="dream-title text-xl sm:text-2xl">Wie unsere Umgebung unsere Träume formt</h2>
</div>
<p className="mb-4 sm:mb-6 md:mb-8 text-sm sm:text-base md:text-lg" style={{color: 'var(--text)'}}>
Entdecke, wie sozioökonomische Faktoren und Umweltbedingungen die Qualität, Intensität und
Inhalte unserer Träume beeinflussen.
</p>
</div>
</div>
<HeroSection
containerTitle="Wie unsere Umgebung unsere Träume formt"
description="Entdecke, wie sozioökonomische Faktoren und Umweltbedingungen die Qualität, Intensität und Inhalte unserer Träume beeinflussen."
/>
{/* Socioeconomic Factors */}
<div className="mb-12">
<h2 className="text-2xl font-bold mb-6 dream-title">Sozioökonomische Faktoren</h2>
<SectionHeader title="Sozioökonomische Faktoren"/>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{/* Urban vs Rural */}
<div className="dreamy-card p-6" style={getBackgroundStyle('blue')}>
<DreamyCard color="blue">
<div className="flex justify-center mb-4">
<div className="p-3 bg-blue-500/20 rounded-full">
<FaCity className="text-blue-600 dark:text-blue-400" size={28}/>
</div>
<IconWithBackground icon={<FaCity/>} color="blue"/>
</div>
<h3 className="text-lg font-bold mb-3 text-center dreamy-text">Urbane vs. Rurale Träume</h3>
@@ -56,14 +41,12 @@ export default function LivingConditions() {
Menschen in ländlichen Gebieten. Ihre Träume enthalten auch mehr technologische Elemente und
soziale Interaktionen mit Fremden.
</p>
</div>
</DreamyCard>
{/* Income Level */}
<div className="dreamy-card p-6" style={getBackgroundStyle('emerald')}>
<DreamyCard color="emerald">
<div className="flex justify-center mb-4">
<div className="p-3 bg-emerald-500/20 rounded-full">
<FaMoneyBillWave className="text-emerald-600 dark:text-emerald-400" size={28}/>
</div>
<IconWithBackground icon={<FaMoneyBillWave/>} color="emerald"/>
</div>
<h3 className="text-lg font-bold mb-3 text-center dreamy-text">Einkommensniveau</h3>
@@ -85,14 +68,12 @@ export default function LivingConditions() {
Personen mit niedrigerem Einkommen. Finanzielle Sicherheit korreliert mit positiveren
Traumthemen und besserer Schlafqualität.
</p>
</div>
</DreamyCard>
{/* Education Level */}
<div className="dreamy-card p-6" style={getBackgroundStyle('amber')}>
<DreamyCard color="amber">
<div className="flex justify-center mb-4">
<div className="p-3 bg-amber-500/20 rounded-full">
<FaGraduationCap className="text-amber-600 dark:text-amber-400" size={28}/>
</div>
<IconWithBackground icon={<FaGraduationCap/>} color="amber"/>
</div>
<h3 className="text-lg font-bold mb-3 text-center dreamy-text">Bildungsgrad</h3>
@@ -131,21 +112,19 @@ export default function LivingConditions() {
Handlungssträngen. Bildung korreliert mit der Fähigkeit, Träume detaillierter zu erinnern
und zu beschreiben.
</p>
</div>
</DreamyCard>
</div>
</div>
{/* Environmental Factors */}
<div className="mb-12">
<h2 className="text-2xl font-bold mb-6 dream-title">Umweltfaktoren</h2>
<SectionHeader title="Umweltfaktoren"/>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{/* Air Quality */}
<div className="dreamy-card p-6" style={getBackgroundStyle('rose')}>
<DreamyCard color="rose">
<div className="flex justify-center mb-4">
<div className="p-3 bg-rose-500/20 rounded-full">
<FaSmog className="text-rose-600 dark:text-rose-400" size={28}/>
</div>
<IconWithBackground icon={<FaSmog/>} color="rose"/>
</div>
<h3 className="text-lg font-bold mb-3 text-center dreamy-text">Luftqualität</h3>
@@ -166,14 +145,12 @@ export default function LivingConditions() {
Studien zeigen, dass Luftverschmutzung die REM-Schlafphasen verkürzt und zu fragmentierteren
Träumen führt.
</p>
</div>
</DreamyCard>
{/* Noise Level */}
<div className="dreamy-card p-6" style={getBackgroundStyle('purple')}>
<DreamyCard color="purple">
<div className="flex justify-center mb-4">
<div className="p-3 bg-purple-500/20 rounded-full">
<FaVolumeUp className="text-purple-600 dark:text-purple-400" size={28}/>
</div>
<IconWithBackground icon={<FaVolumeUp/>} color="purple"/>
</div>
<h3 className="text-lg font-bold mb-3 text-center dreamy-text">Lärmpegel</h3>
@@ -203,14 +180,12 @@ export default function LivingConditions() {
Städtische Lärmbelastung fragmentiert Träume durch kürzere REM-Phasen. Selbst wenn der Lärm
nicht zum Aufwachen führt, beeinflusst er die Traumkontinuität und -qualität negativ.
</p>
</div>
</DreamyCard>
{/* Light Pollution */}
<div className="dreamy-card p-6" style={getBackgroundStyle('violet')}>
<DreamyCard color="violet">
<div className="flex justify-center mb-4">
<div className="p-3 bg-violet-500/20 rounded-full">
<FaLightbulb className="text-violet-600 dark:text-violet-400" size={28}/>
</div>
<IconWithBackground icon={<FaLightbulb/>} color="violet"/>
</div>
<h3 className="text-lg font-bold mb-3 text-center dreamy-text">Lichtverschmutzung</h3>
@@ -253,15 +228,15 @@ export default function LivingConditions() {
Menschen in Gebieten mit geringer Lichtverschmutzung berichten von lebhafteren und
intensiveren Träumen.
</p>
</div>
</DreamyCard>
</div>
</div>
{/* Combined Impact */}
<div className="mb-12">
<h2 className="text-2xl font-bold mb-6 dream-title">Kombinierte Auswirkungen</h2>
<SectionHeader title="Kombinierte Auswirkungen"/>
<div className="dreamy-card p-6" style={getBackgroundStyle('pink-red')}>
<DreamyCard color="pink-red">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<h3 className="text-lg font-bold mb-4 dreamy-text">Optimale vs. Suboptimale Bedingungen</h3>
@@ -321,15 +296,15 @@ export default function LivingConditions() {
Effekt auf die Traumqualität. Die Verbesserung einzelner Faktoren kann bereits zu einer
signifikanten Verbesserung der Traumqualität führen.
</p>
</div>
</DreamyCard>
</div>
{/* Practical Tips */}
<div className="mb-12">
<h2 className="text-2xl font-bold mb-6 dream-title">Praktische Tipps für bessere Träume</h2>
<SectionHeader title="Praktische Tipps für bessere Träume"/>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="dreamy-card p-6" style={getBackgroundStyle('blue')}>
<DreamyCard color="blue">
<h3 className="text-lg font-bold mb-3 dreamy-text">Umweltfaktoren optimieren</h3>
<ul className="list-disc list-inside text-sm space-y-2">
<li>Verwende Verdunkelungsvorhänge, um Lichtverschmutzung zu reduzieren</li>
@@ -338,9 +313,9 @@ export default function LivingConditions() {
<li>Halte die Schlafzimmertemperatur zwischen 16-18°C</li>
<li>Vermeide blaues Licht von Bildschirmen mindestens eine Stunde vor dem Schlafengehen</li>
</ul>
</div>
</DreamyCard>
<div className="dreamy-card p-6" style={getBackgroundStyle('emerald')}>
<DreamyCard color="emerald">
<h3 className="text-lg font-bold mb-3 dreamy-text">Lebensstil-Anpassungen</h3>
<ul className="list-disc list-inside text-sm space-y-2">
<li>Etabliere eine regelmäßige Schlafenszeit und Aufwachzeit</li>
@@ -349,18 +324,8 @@ export default function LivingConditions() {
<li>Reduziere Stress durch regelmäßige Bewegung und Meditation</li>
<li>Vermeide schwere Mahlzeiten, Alkohol und Koffein vor dem Schlafengehen</li>
</ul>
</div>
</DreamyCard>
</div>
</div>
{/* Navigation Links */}
<div className="flex flex-wrap justify-between items-center">
<NavLink to="/dreamarchive/cultural-landscapes" className="dreamy-card p-3 inline-flex items-center">
<span className="mr-2">←</span> Zurück zu Kulturellen Traumlandschaften
</NavLink>
<NavLink to="/dreamarchive/technology" className="dreamy-card p-3 inline-flex items-center">
Weiter zu Technologie & Traumforschung <span className="ml-2">→</span>
</NavLink>
</div>
</div>);
}
}

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

@@ -11,16 +11,12 @@ export default function ResearchLive() {
return (<div className="p-4 pt-24 pb-20 max-w-6xl mx-auto relative overflow-hidden">
{/* Hero Section */}
<HeroSection
title="Traumforschung Live"
subtitle="Aktuelle Studien, Citizen Science und Forscher-Interviews"
containerTitle="Sei Teil der Traumforschung"
description="Entdecke laufende Forschungsprojekte, nimm an Studien teil und lerne von führenden Traumforschern aus der ganzen Welt."
/>
{/* Current Studies */}
<div className="mb-12">
<SectionHeader title="Aktuelle Studien"/>
<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}/>))}
@@ -34,8 +30,6 @@ export default function ResearchLive() {
{/* Citizen Science */}
<div className="mb-12">
<SectionHeader title="Citizen Science: Mitmachen bei der Traumforschung"/>
<DreamyCard color="violet">
<div className="flex items-center mb-6">
<IconWithBackground
@@ -149,4 +143,4 @@ export default function ResearchLive() {
</DreamyCard>
</div>
</div>);
}
}

104
src/pages/dreamarchive/Technology.tsx
View File

@@ -1,41 +1,27 @@
import {getBackgroundStyle, getTextStyle} from '../../styles/StyleUtils';
import {getTextStyle} from '../../styles/StyleUtils';
import {FaBrain, FaChartBar, FaChartPie, FaLaptopCode, FaMicrochip, FaRobot, FaVrCardboard} from 'react-icons/fa';
import {NavLink} from 'react-router-dom';
import HeroSection from '../../components/dreamarchive/HeroSection';
import SectionHeader from '../../components/dreamarchive/SectionHeader';
import DreamyCard from '../../components/dreamarchive/DreamyCard';
import IconWithBackground from '../../components/dreamarchive/IconWithBackground';
export default function Technology() {
return (<div className="p-4 pt-24 pb-20 max-w-6xl mx-auto relative overflow-hidden">
{/* Hero Section */}
<div className="text-center mb-12 sm:mb-16 relative z-10">
<div className="animate-pulse flex flex-col items-center mb-8 sm:mb-12">
<h1 className="text-3xl sm:text-4xl md:text-5xl font-bold mb-4 dream-title">Technologie &
Traumforschung</h1>
<p className="text-lg sm:text-xl dreamy-text">Neueste Entwicklungen in der
Traumforschungstechnologie</p>
</div>
<div
className="dream-container floating max-w-3xl mx-auto backdrop-blur-sm bg-white/10 dark:bg-white/5 rounded-3xl p-4 sm:p-6 md:p-8"
style={{animationDelay: '0.2s'}}>
<div className="flex flex-col sm:flex-row justify-center items-center mb-3 sm:mb-4">
<h2 className="dream-title text-xl sm:text-2xl">Die Zukunft der Traumforschung</h2>
</div>
<p className="mb-4 sm:mb-6 md:mb-8 text-sm sm:text-base md:text-lg" style={{color: 'var(--text)'}}>
Entdecke bahnbrechende Technologien, die uns helfen, Träume besser zu verstehen, zu analysieren
und sogar zu steuern.
</p>
</div>
</div>
<HeroSection
containerTitle="Die Zukunft der Traumforschung"
description="Entdecke bahnbrechende Technologien, die uns helfen, Träume besser zu verstehen, zu analysieren und sogar zu steuern."
/>
{/* Latest Developments */}
<div className="mb-12">
<h2 className="text-2xl font-bold mb-6 dream-title">Neueste Entwicklungen</h2>
<SectionHeader title="Neueste Entwicklungen"/>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{/* EEG-based Dream Detection */}
<div className="dreamy-card rounded-xl p-6 h-full flex flex-col" style={getBackgroundStyle('blue')}>
<DreamyCard color="blue" className="h-full flex flex-col">
<div className="flex justify-center mb-4">
<div className="p-4 bg-blue-500/20 rounded-full">
<FaBrain className="text-blue-600 dark:text-blue-400" size={28}/>
</div>
<IconWithBackground icon={<FaBrain/>} color="blue"/>
</div>
<h3 className="text-xl font-bold mb-3 text-center dreamy-text">EEG-basierte Traumdetektion</h3>
@@ -56,14 +42,12 @@ export default function Technology() {
welcher Traumphase sie sich befindet. Dies ermöglicht gezielte Traumforschung und
-intervention.
</p>
</div>
</DreamyCard>
{/* DreamNet Framework */}
<div className="dreamy-card rounded-xl p-6 h-full flex flex-col" style={getBackgroundStyle('purple')}>
<DreamyCard color="purple" className="h-full flex flex-col">
<div className="flex justify-center mb-4">
<div className="p-4 bg-purple-500/20 rounded-full">
<FaLaptopCode className="text-purple-600 dark:text-purple-400" size={28}/>
</div>
<IconWithBackground icon={<FaLaptopCode/>} color="purple"/>
</div>
<h3 className="text-xl font-bold mb-3 text-center dreamy-text">DreamNet-Framework</h3>
@@ -85,14 +69,12 @@ export default function Technology() {
Körpertemperatur für eine präzise Traumanalyse. KI-Algorithmen interpretieren diese Daten
und erstellen detaillierte Traumprofile.
</p>
</div>
</DreamyCard>
{/* Lucid Dreaming Control */}
<div className="dreamy-card rounded-xl p-6 h-full flex flex-col" style={getBackgroundStyle('emerald')}>
<DreamyCard color="emerald" className="h-full flex flex-col">
<div className="flex justify-center mb-4">
<div className="p-4 bg-emerald-500/20 rounded-full">
<FaVrCardboard className="text-emerald-600 dark:text-emerald-400" size={28}/>
</div>
<IconWithBackground icon={<FaVrCardboard/>} color="emerald"/>
</div>
<h3 className="text-xl font-bold mb-3 text-center dreamy-text">Lucid Dreaming Control</h3>
@@ -118,19 +100,17 @@ export default function Technology() {
Augenbewegungen und Muskelsignale mit der Außenwelt zu kommunizieren und sogar virtuelle
Objekte zu steuern.
</p>
</div>
</DreamyCard>
</div>
</div>
{/* Dream Type Classification */}
<div className="mb-12">
<h2 className="text-2xl font-bold mb-6 dream-title">Traumtypen-Klassifikation</h2>
<SectionHeader title="Traumtypen-Klassifikation"/>
<div className="dreamy-card rounded-xl p-6" style={getBackgroundStyle('rose')}>
<DreamyCard color="rose">
<div className="flex items-center justify-center mb-6">
<div className="p-4 bg-rose-500/20 rounded-full mr-3">
<FaChartPie className="text-rose-600 dark:text-rose-400" size={28}/>
</div>
<IconWithBackground icon={<FaChartPie/>} color="rose" className="mr-3"/>
<h3 className="text-xl font-bold dreamy-text">Globale Verteilung der Traumtypen</h3>
</div>
@@ -272,20 +252,18 @@ export default function Technology() {
Strukturen klassifizieren. Diese Klassifikation hilft Forschern, Muster in großen
Traumdatensätzen zu erkennen und kulturübergreifende Vergleiche anzustellen.
</p>
</div>
</DreamyCard>
</div>
{/* Future Technologies */}
<div className="mb-12">
<h2 className="text-2xl font-bold mb-6 dream-title">Zukunftstechnologien</h2>
<SectionHeader title="Zukunftstechnologien"/>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{/* Dream Recording */}
<div className="dreamy-card rounded-xl p-6 h-full flex flex-col" style={getBackgroundStyle('violet')}>
<DreamyCard color="violet" className="h-full flex flex-col">
<div className="flex items-center mb-4">
<div className="p-4 bg-violet-500/20 rounded-full mr-4">
<FaMicrochip className="text-violet-600 dark:text-violet-400" size={28}/>
</div>
<IconWithBackground icon={<FaMicrochip/>} color="violet" className="mr-4"/>
<h3 className="text-xl font-bold dreamy-text">Traumaufzeichnung</h3>
</div>
@@ -302,14 +280,12 @@ export default function Technology() {
und abzuspielen. Erste Prototypen können bereits einfache visuelle Elemente aus der
Hirnaktivität während des Träumens rekonstruieren.
</p>
</div>
</DreamyCard>
{/* Dream Sharing */}
<div className="dreamy-card rounded-xl p-6 h-full flex flex-col" style={getBackgroundStyle('amber')}>
<DreamyCard color="amber" className="h-full flex flex-col">
<div className="flex items-center mb-4">
<div className="p-4 bg-amber-500/20 rounded-full mr-4">
<FaChartBar className="text-amber-600 dark:text-amber-400" size={28}/>
</div>
<IconWithBackground icon={<FaChartBar/>} color="amber" className="mr-4"/>
<h3 className="text-xl font-bold dreamy-text">Traumaustausch</h3>
</div>
@@ -326,15 +302,15 @@ export default function Technology() {
Traumwelten zu schaffen. Diese Technologie könnte revolutionäre Anwendungen in Therapie,
Kreativität und zwischenmenschlicher Kommunikation haben.
</p>
</div>
</DreamyCard>
</div>
</div>
{/* Ethical Considerations */}
<div className="mb-12">
<h2 className="text-2xl font-bold mb-6 dream-title">Ethische Überlegungen</h2>
<SectionHeader title="Ethische Überlegungen"/>
<div className="dreamy-card rounded-xl p-6" style={getBackgroundStyle('blue')}>
<DreamyCard color="blue">
<h3 className="text-xl font-bold mb-4 dreamy-text">Wichtige ethische Fragen</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
@@ -376,21 +352,7 @@ export default function Technology() {
sorgfältig betrachten. Forscher und Ethiker arbeiten gemeinsam an Richtlinien für
verantwortungsvolle Traumforschung und -technologie.
</p>
</div>
</div>
{/* Navigation Links */}
<div className="flex flex-wrap justify-between items-center">
<NavLink to="/dreamarchive/living-conditions"
className="dreamy-card rounded-xl p-4 inline-flex items-center no-underline"
style={getBackgroundStyle('emerald')}>
<span className="mr-2">←</span> Zurück zu Lebensbedingungen & Traumqualität
</NavLink>
<NavLink to="/dreamarchive/user-dreams"
className="dreamy-card rounded-xl p-4 inline-flex items-center no-underline"
style={getBackgroundStyle('rose')}>
Weiter zu Deinen Träumen im Kontext <span className="ml-2">→</span>
</NavLink>
</DreamyCard>
</div>
</div>);
}

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

@@ -1,6 +1,5 @@
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';
@@ -350,15 +349,5 @@ export default function UserDreams() {
</div>
</div>
</div>
{/* Navigation Links */}
<div className="flex flex-wrap justify-between items-center">
<NavLink to="/dreamarchive/technology" className="dreamy-card p-3 inline-flex items-center">
<span className="mr-2">←</span> Zurück zu Technologie & Traumforschung
</NavLink>
<NavLink to="/dreamarchive/research-live" className="dreamy-card p-3 inline-flex items-center">
Weiter zu Traumforschung Live <span className="ml-2">→</span>
</NavLink>
</div>
</div>);
}

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

@@ -1,34 +1,20 @@
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';
import HeroSection from '../../components/dreamarchive/HeroSection';
import SectionHeader from '../../components/dreamarchive/SectionHeader';
export default function WorldwideEvents() {
return (<div className="p-4 pt-24 pb-20 max-w-6xl mx-auto relative overflow-hidden">
{/* Hero Section */}
<div className="text-center mb-12 sm:mb-16 relative z-10">
<div className="animate-pulse flex flex-col items-center mb-8 sm:mb-12">
<h1 className="text-3xl sm:text-4xl md:text-5xl font-bold mb-4 dream-title">Weltweite Ereignisse &
Traumreaktionen</h1>
<p className="text-lg sm:text-xl dreamy-text">Korrelation zwischen globalen Ereignissen und
Traummustern</p>
</div>
<div
className="dream-container floating max-w-3xl mx-auto backdrop-blur-sm bg-white/10 dark:bg-white/5 rounded-3xl p-4 sm:p-6 md:p-8"
style={{animationDelay: '0.2s'}}>
<div className="flex flex-col sm:flex-row justify-center items-center mb-3 sm:mb-4">
<h2 className="dream-title text-xl sm:text-2xl">Signifikante Ereignisse 2020-2025</h2>
</div>
<p className="mb-4 sm:mb-6 md:mb-8 text-sm sm:text-base md:text-lg" style={{color: 'var(--text)'}}>
Entdecke, wie weltweite Ereignisse wie die COVID-19 Pandemie, Klimawandel-Ereignisse und
geopolitische Spannungen die Traumlandschaft beeinflusst haben.
</p>
</div>
</div>
<HeroSection
containerTitle="Signifikante Ereignisse 2020-2025"
description="Entdecke, wie weltweite Ereignisse wie die COVID-19 Pandemie, Klimawandel-Ereignisse und geopolitische Spannungen die Traumlandschaft beeinflusst haben."
/>
{/* Interactive Timeline (Mock) */}
<div className="mb-12">
<h2 className="text-2xl font-bold mb-6 dream-title">Zeitlinie der Ereignisse</h2>
<SectionHeader title="Zeitlinie der Ereignisse"/>
<div className="relative">
<div
className="absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-purple-300 dark:bg-purple-700 opacity-50"></div>
@@ -80,7 +66,7 @@ export default function WorldwideEvents() {
{/* Detailed Event Sections */}
<div className="mb-12">
<h2 className="text-2xl font-bold mb-6 dream-title">Detaillierte Ereignisanalyse</h2>
<SectionHeader title="Detaillierte Ereignisanalyse"/>
{mockWorldwideEvents.detailedEvents.map((event, index) => {
// Dynamically determine which icon component to use
@@ -103,7 +89,7 @@ export default function WorldwideEvents() {
return (
<div key={event.id} className={`dreamy-card ${!isLast ? 'mb-8' : ''} p-6`}
style={getBackgroundStyle(event.color)}>
style={getBackgroundStyle(event.color as 'purple' | 'blue' | 'violet' | 'emerald' | 'amber' | 'rose' | 'pink-red' | 'cta')}>
<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`}
@@ -128,15 +114,5 @@ export default function WorldwideEvents() {
);
})}
</div>
{/* Navigation Links */}
<div className="flex flex-wrap justify-between items-center">
<NavLink to="/dreamarchive" className="dreamy-card p-3 inline-flex items-center">
<span className="mr-2">←</span> Zurück zur Übersicht
</NavLink>
<NavLink to="/dreamarchive/cultural-landscapes" className="dreamy-card p-3 inline-flex items-center">
Weiter zu Kulturellen Traumlandschaften <span className="ml-2">→</span>
</NavLink>
</div>
</div>);
}

7
src/types/Dream.ts
View File

@@ -16,12 +16,17 @@ export type AudioInput = {
transcript: string;
}
export type ChipInput = {
inputType: "chip";
chip: string;
}
export default class Dream{
id: number;
userId: number;
title: string;
date: Date;
input: TextInput | ImageInput | AudioInput;
input: TextInput | ImageInput | AudioInput | ChipInput;
ai?:{
interpretation: string;
image?: string;