258 lines
14 KiB
TypeScript
258 lines
14 KiB
TypeScript
import {useState} from 'react';
|
|
import {mockDreams} from '../data/MockDreams';
|
|
import {MockUserMap} from '../data/MockUsers';
|
|
import {getSortedDreamsByDate} from '../utils/DreamUtils.ts';
|
|
import {primaryMoodCategories, topDreamTopics} from '../data/MockDailyHighlights';
|
|
import {getAccentStyle, getBackgroundStyle, getCardStyle, getTextStyle} from '../styles/StyleUtils';
|
|
import {formatDateFull, formatDateSimple} from '../utils/DateUtils';
|
|
|
|
export default function Home() {
|
|
const [inputMode, setInputMode] = useState<'text' | 'drawing'>('text');
|
|
const currentUser = MockUserMap.get(4); // Neo Quantum
|
|
const currentDate = new Date();
|
|
const formattedDate = formatDateFull(currentDate);
|
|
|
|
// Get personal dreams (latest 3 for user ID 4)
|
|
const personalDreams = getSortedDreamsByDate(
|
|
mockDreams.filter(dream => dream.userId === 4)
|
|
).slice(0, 3);
|
|
|
|
// Get friends' dreams (latest 5 from other users)
|
|
const friendsDreams = getSortedDreamsByDate(
|
|
mockDreams.filter(dream => dream.userId !== 4)
|
|
).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)'}}>
|
|
{/* Welcome Card */}
|
|
<div className={getCardStyle().className}
|
|
style={getCardStyle()}>
|
|
<h1 className="text-2xl font-bold mb-2 dream-title">Hallo Neo!</h1>
|
|
<p className="text-sm" style={getTextStyle('muted')}>{formattedDate}</p>
|
|
<p className="mt-2" style={getTextStyle()}>Willkommen zurück in deiner Traumwelt.</p>
|
|
</div>
|
|
|
|
{/* Streak Notification */}
|
|
<div
|
|
className={getCardStyle(true).className}
|
|
style={getBackgroundStyle('accent-gradient')}>
|
|
<div className="flex items-center">
|
|
<div className="mr-3">
|
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8" fill="none" viewBox="0 0 24 24"
|
|
stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
|
|
d="M13 10V3L4 14h7v7l9-11h-7z"/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h3 className="font-bold">Traum-Streak: {currentUser?.streakDays} Tage</h3>
|
|
<p className="text-sm">Beeindruckend! Du hältst deine Traum-Aufzeichnungen konstant bei.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Input Card */}
|
|
<div className={getCardStyle().className}
|
|
style={getCardStyle()}>
|
|
<div className="flex justify-between items-center mb-3">
|
|
<h3 className="font-bold dream-title">Neuer Traum</h3>
|
|
<div className="flex rounded-lg overflow-hidden" style={{border: '1px solid var(--accent-soft)'}}>
|
|
<button
|
|
className={`px-3 py-1 text-sm transition-all duration-200`}
|
|
onClick={() => setInputMode('text')}
|
|
style={getAccentStyle(false, inputMode === 'text')}
|
|
>
|
|
Text
|
|
</button>
|
|
<button
|
|
className={`px-3 py-1 text-sm transition-all duration-200`}
|
|
onClick={() => setInputMode('drawing')}
|
|
style={getAccentStyle(false, inputMode === 'drawing')}
|
|
>
|
|
Zeichnung
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{inputMode === 'text' ? (
|
|
<textarea
|
|
className="w-full p-3 rounded-lg mb-3 transition-all duration-200"
|
|
rows={4}
|
|
placeholder="Beschreibe deinen Traum..."
|
|
style={{
|
|
...getBackgroundStyle('normal'),
|
|
...getTextStyle(),
|
|
border: '1px solid var(--accent-soft)'
|
|
}}
|
|
></textarea>
|
|
) : (
|
|
<div
|
|
className="w-full h-40 rounded-lg mb-3 flex items-center justify-center border-2 border-dashed transition-all duration-200"
|
|
style={{
|
|
...getBackgroundStyle('normal'),
|
|
borderColor: 'var(--accent-soft)'
|
|
}}>
|
|
<p style={getTextStyle('muted')}>Zeichne deinen Traum hier (Canvas-Platzhalter)</p>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex justify-between">
|
|
<div className="flex space-x-2">
|
|
<button className="p-2 rounded-full transition-all duration-200 hover:transform hover:scale-110"
|
|
style={getAccentStyle(true)}>
|
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24"
|
|
stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
|
|
d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"/>
|
|
</svg>
|
|
</button>
|
|
<button className="p-2 rounded-full transition-all duration-200 hover:transform hover:scale-110"
|
|
style={getAccentStyle(true)}>
|
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24"
|
|
stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
|
|
d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<button className="px-4 py-2 rounded-lg transition-all duration-200 hover:transform hover:scale-105"
|
|
style={getBackgroundStyle('accent-gradient')}>
|
|
Senden
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Personal Feed */}
|
|
<div className={getCardStyle().className}
|
|
style={getCardStyle()}>
|
|
<h3 className="font-bold mb-3 dream-title">Deine letzten Träume</h3>
|
|
{personalDreams.length > 0 ? (
|
|
<div className="space-y-3">
|
|
{personalDreams.map((dream, index) => (
|
|
<div key={dream.id}
|
|
className="p-3 rounded-lg transition-all duration-300 hover:transform hover:scale-[1.02]"
|
|
style={{
|
|
...getBackgroundStyle('card'),
|
|
animationDelay: `${index * 0.1}s`
|
|
}}>
|
|
<h4 className="font-medium" style={getTextStyle('accent')}>{dream.title}</h4>
|
|
<p className="text-sm" style={getTextStyle('muted')}>
|
|
{formatDateSimple(dream.date)}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<p className="text-sm" style={getTextStyle('muted')}>
|
|
Du hast noch keine Träume aufgezeichnet. Starte jetzt!
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Friends Feed */}
|
|
<div className={getCardStyle().className}
|
|
style={getCardStyle()}>
|
|
<h3 className="font-bold mb-3 dream-title">Träume von Freunden</h3>
|
|
<div className="space-y-3">
|
|
{friendsDreams.map((dream, index) => {
|
|
const dreamUser = MockUserMap.get(dream.userId);
|
|
return (
|
|
<div key={dream.id}
|
|
className="p-3 rounded-lg transition-all duration-300 hover:transform hover:scale-[1.02]"
|
|
style={{
|
|
...getBackgroundStyle('card'),
|
|
animationDelay: `${index * 0.1}s`
|
|
}}>
|
|
<div className="flex items-center mb-1">
|
|
<div
|
|
className="w-6 h-6 rounded-full mr-2 flex items-center justify-center overflow-hidden"
|
|
style={{
|
|
backgroundColor: 'var(--accent-soft)',
|
|
border: '1px solid var(--accent)'
|
|
}}>
|
|
{dreamUser?.profilePicture ? (
|
|
<img src={`/assets/profiles/${dreamUser.profilePicture}`}
|
|
alt={dreamUser.name} className="w-full h-full object-cover"/>
|
|
) : (
|
|
<span className="text-xs"
|
|
style={getTextStyle()}>{dreamUser?.name.charAt(0)}</span>
|
|
)}
|
|
</div>
|
|
<span className="font-medium text-sm"
|
|
style={getTextStyle()}>{dreamUser?.name}</span>
|
|
</div>
|
|
<h4 className="font-medium" style={getTextStyle('accent')}>{dream.title}</h4>
|
|
<p className="text-sm" style={getTextStyle('muted')}>
|
|
{formatDateSimple(dream.date)}
|
|
</p>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Daily Highlights */}
|
|
<div className={getCardStyle().className}
|
|
style={getCardStyle()}>
|
|
<h3 className="font-bold mb-3 dream-title">Tägliche Highlights</h3>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div className="p-3 rounded-lg"
|
|
style={getBackgroundStyle('card')}>
|
|
<h4 className="font-medium mb-2" style={getTextStyle('accent')}>Top Traumthemen</h4>
|
|
<ul className="list-disc pl-5 mb-4">
|
|
{topDreamTopics.map((topic, index) => (
|
|
<li key={index}
|
|
className="text-sm mb-1 transition-all duration-300 hover:transform hover:translate-x-1"
|
|
style={getTextStyle()}>
|
|
<span style={{color: 'var(--accent-soft)'}}>{topic.label}:</span> {topic.percentage}%
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
<div className="p-3 rounded-lg"
|
|
style={getBackgroundStyle('card')}>
|
|
<h4 className="font-medium mb-2" style={getTextStyle('accent')}>Stimmungskategorien</h4>
|
|
<ul className="list-disc pl-5">
|
|
{primaryMoodCategories.map((mood, index) => (
|
|
<li key={index}
|
|
className="text-sm mb-1 transition-all duration-300 hover:transform hover:translate-x-1"
|
|
style={getTextStyle()}>
|
|
<span style={{color: 'var(--accent-soft)'}}>{mood.label}:</span> {mood.percentage}%
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Ad Banner */}
|
|
<div
|
|
className={getCardStyle(true).className}
|
|
style={getBackgroundStyle('gradient')}>
|
|
<div className="flex flex-col sm:flex-row items-center">
|
|
<div className="mb-4 sm:mb-0 sm:mr-4 transition-all duration-300 hover:transform hover:rotate-12">
|
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-16 w-16" fill="none" viewBox="0 0 24 24"
|
|
stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1}
|
|
d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h3 className="font-bold text-lg mb-1">ReMind Sensor-Gerät</h3>
|
|
<p className="text-sm mb-2">Verbessere deine Traumerfahrung mit unserem Sensor mit EEG,
|
|
Bewegungserkennung und Vitalzeichen-Überwachung.</p>
|
|
<div
|
|
className="mb-3 inline-block px-2 py-1 text-xs font-bold rounded transition-all duration-300 hover:transform hover:scale-105"
|
|
style={{backgroundColor: 'var(--accent-soft)', color: 'var(--text)'}}>
|
|
Pro-Funktionen: VR-Räume, Automatische Traumerkennung und Aufzeichnung
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|