113 lines
5.0 KiB
TypeScript
113 lines
5.0 KiB
TypeScript
import {mockDreams} from '../data/MockDreams';
|
|
import {MockUserMap} from '../data/MockUsers';
|
|
import {getSortedDreamsByDate} from '../utils/DreamUtils.ts';
|
|
import {getBackgroundStyle, getCardStyle, getTextStyle} from '../styles/StyleUtils';
|
|
import {formatDateFull} from '../utils/DateUtils';
|
|
import {NavLink} from 'react-router-dom';
|
|
import {DreamCardCompact} from "../components/DreamCardCompact.tsx";
|
|
import {DailyHighlights} from "../components/DailyHighlights.tsx";
|
|
import {ChipCard} from "../components/ChipCard.tsx";
|
|
|
|
export default function Home() {
|
|
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="page p-4 space-y-6">
|
|
{/* 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 justify-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 className="text-center">
|
|
<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>
|
|
|
|
{/*<DreamRecord/>*/}
|
|
|
|
{/* Personal Feed */}
|
|
<NavLink to='/feed'
|
|
className="block mb-4 transition-all duration-300 hover:transform hover:scale-[1.01] bg-gradient-to-br from-[rgba(166,77,255,0.35)] to-[rgba(213,0,249,0.35)] backdrop-blur-md rounded-xl shadow-lg dreamy-card">
|
|
<div className="p-4">
|
|
<h3 className="font-bold mb-2 dream-title text-base">Deine letzten Träume</h3>
|
|
{personalDreams.length > 0 ? (
|
|
<div className="space-y-2">
|
|
{personalDreams.map((dream, index) => (
|
|
<DreamCardCompact
|
|
key={dream.id}
|
|
dream={dream}
|
|
index={index}
|
|
/>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<p className="text-xs text-[var(--text-muted)]">
|
|
Du hast noch keine Träume aufgezeichnet. Starte jetzt!
|
|
</p>
|
|
)}
|
|
</div>
|
|
</NavLink>
|
|
|
|
{/* Friends Feed */}
|
|
<NavLink to='/feed'
|
|
className="block mb-4 transition-all duration-300 hover:transform hover:scale-[1.01] bg-gradient-to-br from-[rgba(166,77,255,0.35)] to-[rgba(213,0,249,0.35)] backdrop-blur-md rounded-xl shadow-lg dreamy-card">
|
|
<div className="p-4">
|
|
<h3 className="font-bold mb-2 dream-title text-base">Träume von Freunden</h3>
|
|
<div className="space-y-2">
|
|
{friendsDreams.map((dream, index) => {
|
|
const dreamUser = MockUserMap.get(dream.userId);
|
|
return (
|
|
<DreamCardCompact
|
|
key={dream.id}
|
|
dream={dream}
|
|
index={index}
|
|
showUser={true}
|
|
user={dreamUser}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</NavLink>
|
|
|
|
{/* Daily Highlights */}
|
|
<NavLink to='/dreamarchive/user-dreams'>
|
|
<DailyHighlights/>
|
|
</NavLink>
|
|
|
|
{/* Ad Banner */}
|
|
<ChipCard/>
|
|
</div>
|
|
)
|
|
;
|
|
}
|