reworked the input type for more flexibility

src/components/DreamCard.tsx

@@ -8,32 +8,32 @@ interface DreamCardProps {
     user: User | undefined;
 }
 
-export default function DreamCard({ dream, user }: DreamCardProps) {
-    return (
-        <NavLink key={dream.id} to={`/dream/${dream.id}`}>
-            <li className="dream-card mb-4">
-                <div className="flex rounded items-center mb-2">
-                    <img
-                        src={`/assets/profiles/${user?.profilePicture}`}
-                        alt={user?.name}
-                        className="w-10 h-10 rounded-full"
-                    />
-                    <span className="ml-4 font-semibold">{user?.name} hat geträumt:</span>
-                </div>
-                <h2 className="title">
-                    {dream.title}
-                </h2>
-                <p className="mt-2 line-clamp-2">{dream.input}</p>
-                <p className="timestamp mt-2">
-                    {dream.date.toLocaleDateString('de-DE', {
-                        day: '2-digit',
-                        month: '2-digit',
-                        year: 'numeric',
-                        hour: '2-digit',
-                        minute: '2-digit',
-                    })}
-                </p>
-            </li>
-        </NavLink>
-    );
+export default function DreamCard({dream, user}: DreamCardProps) {
+    return (<NavLink key={dream.id} to={`/dream/${dream.id}`}>
+        <li className="dream-card mb-4">
+            <div className="flex rounded items-center mb-2">
+                <img
+                    src={`/assets/profiles/${user?.profilePicture}`}
+                    alt={user?.name}
+                    className="w-10 h-10 rounded-full"
+                />
+                <span className="ml-4 font-semibold">{user?.name} hat geträumt:</span>
+            </div>
+            <h2 className="title">
+                {dream.title}
+            </h2>
+            <p className="mt-2 line-clamp-2">
+                {(dream.input.inputType === 'text' && dream.input.input)
+                    || (dream.input.inputType === 'audio' && dream.input.transcript)
+                    || (dream.input.inputType === 'image' && dream.input.description)}
+            </p>
+            <p
+                className="timestamp mt-2">
+                {dream.date.toLocaleDateString('de-DE', {
+                    day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit',
+                })}
+            </p>
+        </li>
+    </NavLink>)
+
 }

src/data/MockDreams.ts

@@ -1,71 +1,84 @@
-import Dream from '../types/Dream.ts';
+import Dream, {type ImageInput, type TextInput} from '../types/Dream.ts';
 
-export const mockDreams: Dream[] = [
-    new Dream({
-        id: 1,
-        userId: 1,
-        title: 'Mitternachtsbibliothek',
-        date: new Date('2025-06-30T02:15:00Z'),
+export const mockDreams: Dream[] = [new Dream({
+    id: 1, userId: 1, title: 'Mitternachtsbibliothek', date: new Date('2025-06-30T02:15:00Z'), input: {
         inputType: 'text',
         input: 'Ich wanderte um Mitternacht in eine riesige Bibliothek, in der jedes Buch sanft leuchtete. Als ich eines aus dem Regal zog, flüsterten seine Seiten mir Geheimnisse zu.',
-        ai: {
-            interpretation: 'Dieses Bild symbolisiert den Wunsch nach Wissen und die Faszination für ungelüftete Geheimnisse. Die leuchtenden Bücher stehen für Inspiration und Erkenntnis, während die nächtliche Atmosphäre auf Introspektion und das Unbewusste hinweist.',
-            image: '01.png',
-            video: '01.mp4',
-            audio: '01.mp3',
-        }
-    }),
-    new Dream({
-        id: 2,
-        userId: 2,
-        title: 'Unterwasserkonzert',
-        date: new Date('2025-06-25T07:45:00Z'),
+    } as TextInput, ai: {
+        interpretation: 'Dieses Bild symbolisiert den Wunsch nach Wissen und die Faszination für ungelüftete Geheimnisse. Die leuchtenden Bücher stehen für Inspiration und Erkenntnis, während die nächtliche Atmosphäre auf Introspektion und das Unbewusste hinweist.',
+        image: '01.png',
+        video: '01.mp4',
+        audio: '01.mp3',
+    }
+}), new Dream({
+    id: 2, userId: 2, title: 'Unterwasserkonzert', date: new Date('2025-06-25T07:45:00Z'), input: {
         inputType: 'text',
         input: 'Ich besuchte ein Konzert unter dem Ozean. Die Musiker waren Delfine, die Melodien anklickten, während Korallenpolypen im Takt zum Rhythmus mit Licht pulsierten.',
-        ai: {
-            interpretation: 'Das Unterwasserkonzert kann als Ausdruck von Kreativität und Harmonie gedeutet werden. Delfine symbolisieren Intelligenz und Spielfreude, Korallenlicht verweist auf emotionale Schwingungen und die Verbindung zum Inneren.',
-            image: '02.png',
-            video: '02.mp4',
-        }
-    }),
-    new Dream({
-        id: 3,
-        userId: 3,
-        title: 'Wüstenzug',
-        date: new Date('2025-05-10T04:30:00Z'),
+    } as TextInput, ai: {
+        interpretation: 'Das Unterwasserkonzert kann als Ausdruck von Kreativität und Harmonie gedeutet werden. Delfine symbolisieren Intelligenz und Spielfreude, Korallenlicht verweist auf emotionale Schwingungen und die Verbindung zum Inneren.',
+        image: '02.png',
+        video: '02.mp4',
+    }
+}), new Dream({
+    id: 3, userId: 3, title: 'Wüstenzug', date: new Date('2025-05-10T04:30:00Z'), input: {
         inputType: 'text',
         input: 'Ein Dampflok-Express tuckerte über goldene Dünen unter einem violetten Himmel. Passagiere winkten, während Kamele mit Laternen neben den Schienen herliefen.',
-        ai: {
-            interpretation: 'Der Wüstenzug steht für eine Reise durch unbewusste Räume und persönliche Herausforderungen (Dünen). Der violette Himmel deutet auf Spiritualität hin, während die Laternen der Kamele Hoffnung und Wegweisung symbolisieren.',
-            image: '03.png',
-            video: '03.mp4',
-        }
-    }),
-    new Dream({
-        id: 4,
-        userId: 1,
-        title: 'Schwebende Teeparty',
-        date: new Date('2025-04-18T09:00:00Z'),
+    } as TextInput, ai: {
+        interpretation: 'Der Wüstenzug steht für eine Reise durch unbewusste Räume und persönliche Herausforderungen (Dünen). Der violette Himmel deutet auf Spiritualität hin, während die Laternen der Kamele Hoffnung und Wegweisung symbolisieren.',
+        image: '03.png',
+        video: '03.mp4',
+    }
+}), new Dream({
+    id: 4, userId: 1, title: 'Schwebende Teeparty', date: new Date('2025-04-18T09:00:00Z'), input: {
         inputType: 'text',
         input: 'Ich saß mit Freunden auf einer Wolke zu einer Teeparty. Jede Tasse war mit Sternenstaub gefüllt, und der Himmel um uns herum schimmerte in pastelligen Regenbogenfarben.',
-        ai: {
-            interpretation: 'Diese Szene steht für Geborgenheit und Gemeinschaft auf einer höheren Ebene. Der Sternenstaub in den Tassen symbolisiert geteilte Träume, die pastelligen Regenbögen zeigen eine optimistische Grundstimmung und Leichtigkeit.',
-            image: '04.png'
-        }
-    }),
-    new Dream({
-        id: 5,
-        userId: 2,
-        title: 'Spiegelgarten',
-        date: new Date('2025-03-05T23:20:00Z'),
+    } as TextInput, ai: {
+        interpretation: 'Diese Szene steht für Geborgenheit und Gemeinschaft auf einer höheren Ebene. Der Sternenstaub in den Tassen symbolisiert geteilte Träume, die pastelligen Regenbögen zeigen eine optimistische Grundstimmung und Leichtigkeit.',
+        image: '04.png'
+    }
+}), new Dream({
+    id: 5, userId: 2, title: 'Spiegelgarten', date: new Date('2025-03-05T23:20:00Z'), input: {
         inputType: 'text',
         input: 'Ich erkundete einen Garten aus Spiegeln, in denen jeweils eine andere Kindheitserinnerung reflektiert wurde. Als ich einen berührte, hörte ich entferntes Lachen durch das Glas hallen.',
-        ai: {
-            interpretation: 'Der Spiegelgarten repräsentiert Selbsterkenntnis und Rückblick auf die eigene Vergangenheit. Jeder Spiegel steht für ein Fragment der Erinnerung, das entfernte Lachen deutet auf positive Prägungen und emotionale Verankerung hin.',
-            image: '05.png',
-            audio: '05.mp3'
-        }
-    }),
+    } as TextInput, ai: {
+        interpretation: 'Der Spiegelgarten repräsentiert Selbsterkenntnis und Rückblick auf die eigene Vergangenheit. Jeder Spiegel steht für ein Fragment der Erinnerung, das entfernte Lachen deutet auf positive Prägungen und emotionale Verankerung hin.',
+        image: '05.png',
+        audio: '05.mp3'
+    }
+}), new Dream({
+    id: 6, userId: 1, title: 'Crystal Forest', date: new Date('2025-07-01T03:30:00Z'), input: {
+        inputType: 'image',
+        img: 'crystal_forest.jpg',
+        imgAlt: 'A glowing forest made of crystals under a starry sky',
+        description: 'I wandered through a glowing forest where every tree was made of shimmering crystal, reflecting thousands of stars above.',
+    } as ImageInput, ai: {
+        interpretation: 'The crystal forest represents clarity and the search for inner truth. The reflections of stars symbolize inspiration and the connection between your dreams and aspirations.',
+        audio: 'crystal_forest.mp3',
+        image: 'crystal_forest_ai.png',
+    },
+}), new Dream({
+    id: 7, userId: 2, title: 'Mirror Lake', date: new Date('2025-07-02T05:15:00Z'), input: {
+        inputType: 'image',
+        img: 'mirror_lake.jpg',
+        imgAlt: 'A perfectly still lake reflecting the moon and clouds',
+        description: 'I stood at the edge of a silent lake, its surface so calm it looked like a perfect mirror, reflecting the moon and drifting clouds.',
+    } as ImageInput, ai: {
+        interpretation: 'The mirror lake suggests self-reflection and emotional calm. The moon and clouds indicate subconscious thoughts and the ever-changing nature of your feelings.',
+        video: 'mirror_lake_ai.mp4',
+        image: 'mirror_lake_ai.png',
+    },
+}), new Dream({
+    id: 8, userId: 3, title: 'Floating City', date: new Date('2025-07-03T06:50:00Z'), input: {
+        inputType: 'image',
+        img: 'floating_city.jpg',
+        imgAlt: 'A futuristic city floating above the clouds at sunrise',
+        description: 'I explored a futuristic city that floated above the clouds, with golden sunlight streaming through transparent walkways.',
+    } as ImageInput, ai: {
+        interpretation: 'The floating city symbolizes ambition and the desire to rise above limitations. The sunrise and golden light represent hope and new beginnings.',
+        image: 'floating_city_ai.png',
+    },
+}),
+
 ];
 
 export default mockDreams;

src/pages/DreamPage.tsx

@@ -69,8 +69,19 @@ export default function DreamPage() {
                 <div className="flex items-center mb-4">
                     <span className="font-medium" style={{color: 'var(--accent)'}}>Traum-Beschreibung</span>
                 </div>
+                {(dream.input.inputType === 'image' || dream.input.inputType === 'audio') && (
+                    <div className="flex justify-center mb-1">
+                        {dream.input.inputType === 'audio' && (
+                            <audio></audio>
+                        )}
+                        {dream.input.inputType === 'image' && (
+                            <img alt={dream.input.imgAlt}></img>
+                        )}
+                    </div>)}
                 <p className="leading-relaxed text-lg">
-                    {dream.input}
+                    {(dream.input.inputType === 'text' && dream.input.input)
+                        || (dream.input.inputType === 'audio' && dream.input.transcript)
+                        || (dream.input.inputType === 'image' && dream.input.description)}
                 </p>
             </div>
 
@@ -135,7 +146,7 @@ export default function DreamPage() {
                 <div className="space-y-2" style={{color: 'var(--text-muted)'}}>
                     <div className="flex justify-between">
                         <span>Eingabetyp</span>
-                        <span className="capitalize">{dream.inputType}</span>
+                        <span className="capitalize">{dream.input.inputType}</span>
                     </div>
                     <div className="flex justify-between">
                         <span>Datum</span>

src/types/Dream.ts

@@ -1,10 +1,27 @@
+export type TextInput = {
+    inputType: "text";
+    input: string;
+}
+
+export type ImageInput = {
+    inputType: "image";
+    img: string;
+    imgAlt: string;
+    description: string;
+}
+
+export type AudioInput = {
+    inputType: "audio";
+    audio: string;
+    transcript: string;
+}
+
 export default class Dream{
     id: number;
     userId: number;
     title: string;
     date: Date;
-    inputType: "text" | "image" | "audio" ;
-    input: string;
+    input: TextInput | ImageInput | AudioInput;
     ai?:{
         interpretation: string;
         image?: string;
@@ -18,8 +35,7 @@ export default class Dream{
         userId: number;
         title: string;
         date: Date;
-        inputType: "text" | "image" | "audio" ;
-        input: string;
+        input: TextInput | ImageInput | AudioInput;
         ai: {
             interpretation: string;
             image?: string;
@@ -32,7 +48,6 @@ export default class Dream{
         this.userId = params.userId;
         this.title = params.title;
         this.date = params.date;
-        this.inputType = params.inputType;
         this.input = params.input;
         this.ai= params.ai;
     }