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'; import {getBackgroundStyle} from '../../styles/StyleUtils';
interface DreamyCardProps { 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'; import React from 'react';
interface HeroSectionProps { interface HeroSectionProps {
title: string; title?: string;
subtitle: string; subtitle?: string;
containerTitle: string; containerTitle: string;
description: string; description: string;
} }
export const HeroSection: React.FC<HeroSectionProps> = ({title, subtitle, containerTitle, description}) => { export const HeroSection: React.FC<HeroSectionProps> = ({containerTitle, description}) => {
return ( return (
<div className="text-center mb-12 sm:mb-16 relative z-10"> <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 <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" 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'}}> 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 { interface IconWithBackgroundProps {
icon: ReactElement; icon: ReactElement;
@@ -18,7 +19,7 @@ export const IconWithBackground: React.FC<IconWithBackgroundProps> = ({
{React.cloneElement(icon, { {React.cloneElement(icon, {
className: `text-${color}-600 dark:text-${color}-400`, className: `text-${color}-600 dark:text-${color}-400`,
size: size size: size
})} } as React.SVGProps<SVGSVGElement>)}
</div> </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; institution: string;
specialty: string; specialty: string;
topics: string[]; topics: string[];
color: string; color: 'purple' | 'blue' | 'violet' | 'emerald' | 'amber' | 'rose' | 'pink-red' | 'cta';
videoId: string; 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; endDate: string;
description: 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 * 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 // Current Studies data
export const currentStudies = [ export const currentStudies: Study[] = [
{ {
id: 1, id: 1,
title: "Traumkontinuität während der Pandemie", title: "Traumkontinuität während der Pandemie",
@@ -87,7 +117,7 @@ export const citizenScienceProjects = [
]; ];
// Researcher Interviews data // Researcher Interviews data
export const researcherInterviews = [ export const researcherInterviews: ResearcherInterview[] = [
{ {
id: 1, id: 1,
name: "Dr. Sarah Merton", 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 { export default {
currentStudies, currentStudies,
citizenScienceProjects, citizenScienceProjects,
researcherInterviews, researcherInterviews,
upcomingEvents upcomingEvents
}; } as MockResearchLiveData;

3
src/pages/Home.tsx
View File

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

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

@@ -1,6 +1,5 @@
import {getBackgroundStyle, getTextStyle} from '../../styles/StyleUtils'; import {getBackgroundStyle, getTextStyle} from '../../styles/StyleUtils';
import {FaGlobeAfrica, FaGlobeAsia, FaGlobeEurope, FaHandshake} from 'react-icons/fa'; import {FaGlobeAfrica, FaGlobeAsia, FaGlobeEurope, FaHandshake} from 'react-icons/fa';
import {NavLink} from 'react-router-dom';
export default function CulturalLandscapes() { export default function CulturalLandscapes() {
return (<div className="p-4 pt-24 pb-20 max-w-6xl mx-auto relative overflow-hidden"> 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> </p>
</div> </div>
</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>); </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"> <div className="p-4 pt-24 pb-20 max-w-6xl mx-auto relative overflow-hidden">
{/* Hero Section */} {/* Hero Section */}
<div className="text-center mb-12 sm:mb-16 relative z-10"> <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 <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" 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'}}> 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 {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() { export default function LivingConditions() {
return (<div className="p-4 pt-24 pb-20 max-w-6xl mx-auto relative overflow-hidden"> return (<div className="p-4 pt-24 pb-20 max-w-6xl mx-auto relative overflow-hidden">
{/* Hero Section */} {/* Hero Section */}
<div className="text-center mb-12 sm:mb-16 relative z-10"> <HeroSection
<div className="animate-pulse flex flex-col items-center mb-8 sm:mb-12"> containerTitle="Wie unsere Umgebung unsere Träume formt"
<h1 className="text-3xl sm:text-4xl md:text-5xl font-bold mb-4 dream-title">Lebensbedingungen & description="Entdecke, wie sozioökonomische Faktoren und Umweltbedingungen die Qualität, Intensität und Inhalte unserer Träume beeinflussen."
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>
{/* Socioeconomic Factors */} {/* Socioeconomic Factors */}
<div className="mb-12"> <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"> <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{/* Urban vs Rural */} {/* Urban vs Rural */}
<div className="dreamy-card p-6" style={getBackgroundStyle('blue')}> <DreamyCard color="blue">
<div className="flex justify-center mb-4"> <div className="flex justify-center mb-4">
<div className="p-3 bg-blue-500/20 rounded-full"> <IconWithBackground icon={<FaCity/>} color="blue"/>
<FaCity className="text-blue-600 dark:text-blue-400" size={28}/>
</div>
</div> </div>
<h3 className="text-lg font-bold mb-3 text-center dreamy-text">Urbane vs. Rurale Träume</h3> <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 Menschen in ländlichen Gebieten. Ihre Träume enthalten auch mehr technologische Elemente und
soziale Interaktionen mit Fremden. soziale Interaktionen mit Fremden.
</p> </p>
</div> </DreamyCard>
{/* Income Level */} {/* Income Level */}
<div className="dreamy-card p-6" style={getBackgroundStyle('emerald')}> <DreamyCard color="emerald">
<div className="flex justify-center mb-4"> <div className="flex justify-center mb-4">
<div className="p-3 bg-emerald-500/20 rounded-full"> <IconWithBackground icon={<FaMoneyBillWave/>} color="emerald"/>
<FaMoneyBillWave className="text-emerald-600 dark:text-emerald-400" size={28}/>
</div>
</div> </div>
<h3 className="text-lg font-bold mb-3 text-center dreamy-text">Einkommensniveau</h3> <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 Personen mit niedrigerem Einkommen. Finanzielle Sicherheit korreliert mit positiveren
Traumthemen und besserer Schlafqualität. Traumthemen und besserer Schlafqualität.
</p> </p>
</div> </DreamyCard>
{/* Education Level */} {/* Education Level */}
<div className="dreamy-card p-6" style={getBackgroundStyle('amber')}> <DreamyCard color="amber">
<div className="flex justify-center mb-4"> <div className="flex justify-center mb-4">
<div className="p-3 bg-amber-500/20 rounded-full"> <IconWithBackground icon={<FaGraduationCap/>} color="amber"/>
<FaGraduationCap className="text-amber-600 dark:text-amber-400" size={28}/>
</div>
</div> </div>
<h3 className="text-lg font-bold mb-3 text-center dreamy-text">Bildungsgrad</h3> <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 Handlungssträngen. Bildung korreliert mit der Fähigkeit, Träume detaillierter zu erinnern
und zu beschreiben. und zu beschreiben.
</p> </p>
</div> </DreamyCard>
</div> </div>
</div> </div>
{/* Environmental Factors */} {/* Environmental Factors */}
<div className="mb-12"> <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"> <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{/* Air Quality */} {/* Air Quality */}
<div className="dreamy-card p-6" style={getBackgroundStyle('rose')}> <DreamyCard color="rose">
<div className="flex justify-center mb-4"> <div className="flex justify-center mb-4">
<div className="p-3 bg-rose-500/20 rounded-full"> <IconWithBackground icon={<FaSmog/>} color="rose"/>
<FaSmog className="text-rose-600 dark:text-rose-400" size={28}/>
</div>
</div> </div>
<h3 className="text-lg font-bold mb-3 text-center dreamy-text">Luftqualität</h3> <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 Studien zeigen, dass Luftverschmutzung die REM-Schlafphasen verkürzt und zu fragmentierteren
Träumen führt. Träumen führt.
</p> </p>
</div> </DreamyCard>
{/* Noise Level */} {/* Noise Level */}
<div className="dreamy-card p-6" style={getBackgroundStyle('purple')}> <DreamyCard color="purple">
<div className="flex justify-center mb-4"> <div className="flex justify-center mb-4">
<div className="p-3 bg-purple-500/20 rounded-full"> <IconWithBackground icon={<FaVolumeUp/>} color="purple"/>
<FaVolumeUp className="text-purple-600 dark:text-purple-400" size={28}/>
</div>
</div> </div>
<h3 className="text-lg font-bold mb-3 text-center dreamy-text">Lärmpegel</h3> <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 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. nicht zum Aufwachen führt, beeinflusst er die Traumkontinuität und -qualität negativ.
</p> </p>
</div> </DreamyCard>
{/* Light Pollution */} {/* Light Pollution */}
<div className="dreamy-card p-6" style={getBackgroundStyle('violet')}> <DreamyCard color="violet">
<div className="flex justify-center mb-4"> <div className="flex justify-center mb-4">
<div className="p-3 bg-violet-500/20 rounded-full"> <IconWithBackground icon={<FaLightbulb/>} color="violet"/>
<FaLightbulb className="text-violet-600 dark:text-violet-400" size={28}/>
</div>
</div> </div>
<h3 className="text-lg font-bold mb-3 text-center dreamy-text">Lichtverschmutzung</h3> <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 Menschen in Gebieten mit geringer Lichtverschmutzung berichten von lebhafteren und
intensiveren Träumen. intensiveren Träumen.
</p> </p>
</div> </DreamyCard>
</div> </div>
</div> </div>
{/* Combined Impact */} {/* Combined Impact */}
<div className="mb-12"> <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 className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div> <div>
<h3 className="text-lg font-bold mb-4 dreamy-text">Optimale vs. Suboptimale Bedingungen</h3> <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 Effekt auf die Traumqualität. Die Verbesserung einzelner Faktoren kann bereits zu einer
signifikanten Verbesserung der Traumqualität führen. signifikanten Verbesserung der Traumqualität führen.
</p> </p>
</div> </DreamyCard>
</div> </div>
{/* Practical Tips */} {/* Practical Tips */}
<div className="mb-12"> <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="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> <h3 className="text-lg font-bold mb-3 dreamy-text">Umweltfaktoren optimieren</h3>
<ul className="list-disc list-inside text-sm space-y-2"> <ul className="list-disc list-inside text-sm space-y-2">
<li>Verwende Verdunkelungsvorhänge, um Lichtverschmutzung zu reduzieren</li> <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>Halte die Schlafzimmertemperatur zwischen 16-18°C</li>
<li>Vermeide blaues Licht von Bildschirmen mindestens eine Stunde vor dem Schlafengehen</li> <li>Vermeide blaues Licht von Bildschirmen mindestens eine Stunde vor dem Schlafengehen</li>
</ul> </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> <h3 className="text-lg font-bold mb-3 dreamy-text">Lebensstil-Anpassungen</h3>
<ul className="list-disc list-inside text-sm space-y-2"> <ul className="list-disc list-inside text-sm space-y-2">
<li>Etabliere eine regelmäßige Schlafenszeit und Aufwachzeit</li> <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>Reduziere Stress durch regelmäßige Bewegung und Meditation</li>
<li>Vermeide schwere Mahlzeiten, Alkohol und Koffein vor dem Schlafengehen</li> <li>Vermeide schwere Mahlzeiten, Alkohol und Koffein vor dem Schlafengehen</li>
</ul> </ul>
</div> </DreamyCard>
</div> </div>
</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>); </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"> return (<div className="p-4 pt-24 pb-20 max-w-6xl mx-auto relative overflow-hidden">
{/* Hero Section */} {/* Hero Section */}
<HeroSection <HeroSection
title="Traumforschung Live"
subtitle="Aktuelle Studien, Citizen Science und Forscher-Interviews"
containerTitle="Sei Teil der Traumforschung" containerTitle="Sei Teil der Traumforschung"
description="Entdecke laufende Forschungsprojekte, nimm an Studien teil und lerne von führenden Traumforschern aus der ganzen Welt." description="Entdecke laufende Forschungsprojekte, nimm an Studien teil und lerne von führenden Traumforschern aus der ganzen Welt."
/> />
{/* Current Studies */} {/* Current Studies */}
<div className="mb-12"> <div className="mb-12">
<SectionHeader title="Aktuelle Studien"/>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{mockResearchLive.currentStudies.slice(0, 2).map((study) => ( {mockResearchLive.currentStudies.slice(0, 2).map((study) => (
<StudyCard key={study.id} study={study}/>))} <StudyCard key={study.id} study={study}/>))}
@@ -34,8 +30,6 @@ export default function ResearchLive() {
{/* Citizen Science */} {/* Citizen Science */}
<div className="mb-12"> <div className="mb-12">
<SectionHeader title="Citizen Science: Mitmachen bei der Traumforschung"/>
<DreamyCard color="violet"> <DreamyCard color="violet">
<div className="flex items-center mb-6"> <div className="flex items-center mb-6">
<IconWithBackground <IconWithBackground
@@ -149,4 +143,4 @@ export default function ResearchLive() {
</DreamyCard> </DreamyCard>
</div> </div>
</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 {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() { export default function Technology() {
return (<div className="p-4 pt-24 pb-20 max-w-6xl mx-auto relative overflow-hidden"> return (<div className="p-4 pt-24 pb-20 max-w-6xl mx-auto relative overflow-hidden">
{/* Hero Section */} {/* Hero Section */}
<div className="text-center mb-12 sm:mb-16 relative z-10"> <HeroSection
<div className="animate-pulse flex flex-col items-center mb-8 sm:mb-12"> containerTitle="Die Zukunft der Traumforschung"
<h1 className="text-3xl sm:text-4xl md:text-5xl font-bold mb-4 dream-title">Technologie & description="Entdecke bahnbrechende Technologien, die uns helfen, Träume besser zu verstehen, zu analysieren und sogar zu steuern."
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>
{/* Latest Developments */} {/* Latest Developments */}
<div className="mb-12"> <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"> <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{/* EEG-based Dream Detection */} {/* 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="flex justify-center mb-4">
<div className="p-4 bg-blue-500/20 rounded-full"> <IconWithBackground icon={<FaBrain/>} color="blue"/>
<FaBrain className="text-blue-600 dark:text-blue-400" size={28}/>
</div>
</div> </div>
<h3 className="text-xl font-bold mb-3 text-center dreamy-text">EEG-basierte Traumdetektion</h3> <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 welcher Traumphase sie sich befindet. Dies ermöglicht gezielte Traumforschung und
-intervention. -intervention.
</p> </p>
</div> </DreamyCard>
{/* DreamNet Framework */} {/* 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="flex justify-center mb-4">
<div className="p-4 bg-purple-500/20 rounded-full"> <IconWithBackground icon={<FaLaptopCode/>} color="purple"/>
<FaLaptopCode className="text-purple-600 dark:text-purple-400" size={28}/>
</div>
</div> </div>
<h3 className="text-xl font-bold mb-3 text-center dreamy-text">DreamNet-Framework</h3> <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 Körpertemperatur für eine präzise Traumanalyse. KI-Algorithmen interpretieren diese Daten
und erstellen detaillierte Traumprofile. und erstellen detaillierte Traumprofile.
</p> </p>
</div> </DreamyCard>
{/* Lucid Dreaming Control */} {/* 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="flex justify-center mb-4">
<div className="p-4 bg-emerald-500/20 rounded-full"> <IconWithBackground icon={<FaVrCardboard/>} color="emerald"/>
<FaVrCardboard className="text-emerald-600 dark:text-emerald-400" size={28}/>
</div>
</div> </div>
<h3 className="text-xl font-bold mb-3 text-center dreamy-text">Lucid Dreaming Control</h3> <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 Augenbewegungen und Muskelsignale mit der Außenwelt zu kommunizieren und sogar virtuelle
Objekte zu steuern. Objekte zu steuern.
</p> </p>
</div> </DreamyCard>
</div> </div>
</div> </div>
{/* Dream Type Classification */} {/* Dream Type Classification */}
<div className="mb-12"> <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="flex items-center justify-center mb-6">
<div className="p-4 bg-rose-500/20 rounded-full mr-3"> <IconWithBackground icon={<FaChartPie/>} color="rose" className="mr-3"/>
<FaChartPie className="text-rose-600 dark:text-rose-400" size={28}/>
</div>
<h3 className="text-xl font-bold dreamy-text">Globale Verteilung der Traumtypen</h3> <h3 className="text-xl font-bold dreamy-text">Globale Verteilung der Traumtypen</h3>
</div> </div>
@@ -272,20 +252,18 @@ export default function Technology() {
Strukturen klassifizieren. Diese Klassifikation hilft Forschern, Muster in großen Strukturen klassifizieren. Diese Klassifikation hilft Forschern, Muster in großen
Traumdatensätzen zu erkennen und kulturübergreifende Vergleiche anzustellen. Traumdatensätzen zu erkennen und kulturübergreifende Vergleiche anzustellen.
</p> </p>
</div> </DreamyCard>
</div> </div>
{/* Future Technologies */} {/* Future Technologies */}
<div className="mb-12"> <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"> <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{/* Dream Recording */} {/* 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="flex items-center mb-4">
<div className="p-4 bg-violet-500/20 rounded-full mr-4"> <IconWithBackground icon={<FaMicrochip/>} color="violet" className="mr-4"/>
<FaMicrochip className="text-violet-600 dark:text-violet-400" size={28}/>
</div>
<h3 className="text-xl font-bold dreamy-text">Traumaufzeichnung</h3> <h3 className="text-xl font-bold dreamy-text">Traumaufzeichnung</h3>
</div> </div>
@@ -302,14 +280,12 @@ export default function Technology() {
und abzuspielen. Erste Prototypen können bereits einfache visuelle Elemente aus der und abzuspielen. Erste Prototypen können bereits einfache visuelle Elemente aus der
Hirnaktivität während des Träumens rekonstruieren. Hirnaktivität während des Träumens rekonstruieren.
</p> </p>
</div> </DreamyCard>
{/* Dream Sharing */} {/* 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="flex items-center mb-4">
<div className="p-4 bg-amber-500/20 rounded-full mr-4"> <IconWithBackground icon={<FaChartBar/>} color="amber" className="mr-4"/>
<FaChartBar className="text-amber-600 dark:text-amber-400" size={28}/>
</div>
<h3 className="text-xl font-bold dreamy-text">Traumaustausch</h3> <h3 className="text-xl font-bold dreamy-text">Traumaustausch</h3>
</div> </div>
@@ -326,15 +302,15 @@ export default function Technology() {
Traumwelten zu schaffen. Diese Technologie könnte revolutionäre Anwendungen in Therapie, Traumwelten zu schaffen. Diese Technologie könnte revolutionäre Anwendungen in Therapie,
Kreativität und zwischenmenschlicher Kommunikation haben. Kreativität und zwischenmenschlicher Kommunikation haben.
</p> </p>
</div> </DreamyCard>
</div> </div>
</div> </div>
{/* Ethical Considerations */} {/* Ethical Considerations */}
<div className="mb-12"> <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> <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"> <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 sorgfältig betrachten. Forscher und Ethiker arbeiten gemeinsam an Richtlinien für
verantwortungsvolle Traumforschung und -technologie. verantwortungsvolle Traumforschung und -technologie.
</p> </p>
</div> </DreamyCard>
</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>
</div> </div>
</div>); </div>);
} }

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

@@ -1,6 +1,5 @@
import {getBackgroundStyle, getTextStyle} from '../../styles/StyleUtils'; import {getBackgroundStyle, getTextStyle} from '../../styles/StyleUtils';
import {FaChartLine, FaRegCommentDots, FaRegLightbulb, FaUser} from 'react-icons/fa'; import {FaChartLine, FaRegCommentDots, FaRegLightbulb, FaUser} from 'react-icons/fa';
import {NavLink} from 'react-router-dom';
import {MockUserMap} from '../../data/MockUsers'; import {MockUserMap} from '../../data/MockUsers';
import mockUserDreams from '../../data/MockUserDreams'; import mockUserDreams from '../../data/MockUserDreams';
@@ -350,15 +349,5 @@ export default function UserDreams() {
</div> </div>
</div> </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>); </div>);
} }

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

@@ -1,34 +1,20 @@
import {getBackgroundStyle, getTextStyle} from '../../styles/StyleUtils'; import {getBackgroundStyle, getTextStyle} from '../../styles/StyleUtils';
import {FaFire, FaFlag, FaVirus} from 'react-icons/fa'; import {FaFire, FaFlag, FaVirus} from 'react-icons/fa';
import {NavLink} from 'react-router-dom';
import mockWorldwideEvents from '../../data/MockWorldwideEvents'; import mockWorldwideEvents from '../../data/MockWorldwideEvents';
import HeroSection from '../../components/dreamarchive/HeroSection';
import SectionHeader from '../../components/dreamarchive/SectionHeader';
export default function WorldwideEvents() { export default function WorldwideEvents() {
return (<div className="p-4 pt-24 pb-20 max-w-6xl mx-auto relative overflow-hidden"> return (<div className="p-4 pt-24 pb-20 max-w-6xl mx-auto relative overflow-hidden">
{/* Hero Section */} {/* Hero Section */}
<div className="text-center mb-12 sm:mb-16 relative z-10"> <HeroSection
<div className="animate-pulse flex flex-col items-center mb-8 sm:mb-12"> containerTitle="Signifikante Ereignisse 2020-2025"
<h1 className="text-3xl sm:text-4xl md:text-5xl font-bold mb-4 dream-title">Weltweite Ereignisse & description="Entdecke, wie weltweite Ereignisse wie die COVID-19 Pandemie, Klimawandel-Ereignisse und geopolitische Spannungen die Traumlandschaft beeinflusst haben."
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>
{/* Interactive Timeline (Mock) */} {/* Interactive Timeline (Mock) */}
<div className="mb-12"> <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="relative">
<div <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> 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 */} {/* Detailed Event Sections */}
<div className="mb-12"> <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) => { {mockWorldwideEvents.detailedEvents.map((event, index) => {
// Dynamically determine which icon component to use // Dynamically determine which icon component to use
@@ -103,7 +89,7 @@ export default function WorldwideEvents() {
return ( return (
<div key={event.id} className={`dreamy-card ${!isLast ? 'mb-8' : ''} p-6`} <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="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`}> <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`} <IconComponent className={`text-${event.color}-600 dark:text-${event.color}-400`}
@@ -128,15 +114,5 @@ export default function WorldwideEvents() {
); );
})} })}
</div> </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>); </div>);
} }

7
src/types/Dream.ts
View File

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