added a dream page

src/pages/DreamPage.tsx

@@ -0,0 +1,104 @@
+// src/pages/DreamPage.tsx
+
+import {type NavigateFunction, useNavigate, useParams} from 'react-router-dom';
+import {mockDreams} from '../data/MockDreams';
+import MockUsers from '../data/MockUsers';
+import User from '../types/User';
+import type Dream from "../types/Dream.ts";
+
+export default function DreamPage() {
+    const {id} = useParams<{ id: string }>();
+    const navigate: NavigateFunction = useNavigate();
+
+    const dream: Dream | undefined = mockDreams.find(d => d.id === Number(id));
+    const user: User | undefined = dream ? MockUsers.find(u => u.id === dream.userId) : undefined;
+
+    if (!dream) {
+        return (<div className="page p-4">
+            <button
+                onClick={() => navigate(-1)}
+                className="mb-4 hover:underline"
+                style={{ color: 'var(--accent)' }}
+            >
+                ← Zurück
+            </button>
+            <p style={{ color: 'var(--text-muted)' }}>Traum nicht gefunden.</p>
+        </div>);
+    }
+
+    return (<div className="page min-h-screen">
+        {/* Header */}
+        <div className="relative" style={{ background: 'var(--accent-gradient)' }}>
+            <div className="p-6 text-white">
+                <button
+                    onClick={() => navigate(-1)}
+                    className="absolute top-4 left-4 p-2 rounded-full bg-white/20 backdrop-blur-sm"
+                >
+                    ←
+                </button>
+                <div className="flex items-center space-x-4 mt-8">
+                    {user && (<img
+                        src={`/assets/profiles/${user.profilePicture}`}
+                        alt={user.name}
+                        className="w-16 h-16 rounded-full border-4 border-white/30 object-cover"
+                    />)}
+                    <div>
+                        <h1 className="font-bold !text-xl sm:!text-2xl md:!text-3xl lg:!text-4xl">
+                            {dream.title}
+                        </h1>
+                        {user && (<p className="mt-1 text-white/80">
+                            {user.name} •{' '}
+                            {dream.date.toLocaleDateString('de-DE', {
+                                day: '2-digit',
+                                month: '2-digit',
+                                year: 'numeric',
+                                hour: '2-digit',
+                                minute: '2-digit',
+                            })}
+                        </p>)}
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        {/* Inhalt */}
+        <div className="p-4 space-y-6">
+            <div className="dream-card rounded-2xl p-6">
+                <div className="flex items-center mb-4">
+                    <span className="font-medium" style={{ color: 'var(--accent)' }}>Traum-Beschreibung</span>
+                </div>
+                <p className="leading-relaxed text-lg">
+                    {dream.input}
+                </p>
+            </div>
+
+            {dream.ai?.interpretation && (<div
+                className="dreamPanel rounded-2xl p-6">
+                <div className="flex items-center mb-4">
+                    <span className="font-medium" style={{ color: 'var(--accent)' }}>KI-Interpretation</span>
+                </div>
+                <p className="leading-relaxed">
+                    {dream.ai.interpretation}
+                </p>
+            </div>)}
+
+            <div className="dream-card rounded-2xl p-6">
+                <h2 className="text-lg font-semibold mb-3">Details</h2>
+                <div className="space-y-2" style={{ color: 'var(--text-muted)' }}>
+                    <div className="flex justify-between">
+                        <span>Eingabetyp</span>
+                        <span className="capitalize">{dream.inputType}</span>
+                    </div>
+                    <div className="flex justify-between">
+                        <span>Datum</span>
+                        <span>
+                            {dream.date.toLocaleDateString('de-DE', {
+                                day: '2-digit', month: '2-digit', year: 'numeric',
+                            })}
+                          </span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>);
+}