moved DreamCards to own Component

src/components/DreamCard.tsx

@@ -0,0 +1,39 @@
+// src/components/DreamCard.tsx
+import Dream from '../types/Dream';
+import type User from "../types/User.ts";
+import {NavLink} from "react-router-dom";
+
+interface DreamCardProps {
+    dream: Dream;
+    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>
+    );
+}

src/pages/Feed.tsx

@@ -3,7 +3,7 @@ import {mockDreams} from '../data/MockDreams';
 import Dream from '../types/Dream';
 import type User from "../types/User.ts";
 import {MockUserMap} from "../data/MockUsers.ts";
-import {NavLink} from "react-router-dom";
+import DreamCard from "../components/DreamCard";
 
 export default function Feed() {
     const sortedDreams = [...mockDreams].sort((a, b) => b.date.getTime() - a.date.getTime());
@@ -14,29 +14,7 @@ export default function Feed() {
                     {sortedDreams.map((dream: Dream) => {
                         const user: User | undefined = MockUserMap.get(dream.userId);
                         return (
-                            <NavLink key={dream.id} to={`/dream/${dream.id}`}>
+                            <DreamCard key={dream.id} dream={dream} user={user} />
-                                <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>
                         )
                     })}
                 </ul>