mpuchstein/REMind
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

moved DreamCards to own Component

Browse Source
This commit is contained in:
Matthias Puchstein
2025-07-04 11:37:56 +02:00
parent 8b50263bd8
commit ebe2e33189
2 changed files with 41 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/DreamCard.tsx Normal file
View File

@@ -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>
);
}

26
src/pages/Feed.tsx
View File

@@ -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}`}>
<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>
<DreamCard key={dream.id} dream={dream} user={user} />
)
})}
</ul>