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

introduced ChipOverview route and component, refactored Home to use DreamCardCompact for streamlined rendering, and extracted DailyHighlights into a reusable component

Browse Source 
Signed-off-by: Matthias Puchstein <matthias@puchstein.bayern>
This commit is contained in:
Matthias Puchstein
2025-07-12 12:10:51 +02:00
parent ff30258377
commit 153f5fd146
5 changed files with 180 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
src/pages/Home.tsx
View File

@@ -1,11 +1,12 @@
import {mockDreams} from '../data/MockDreams';
import {MockUserMap} from '../data/MockUsers';
import {getSortedDreamsByDate} from '../utils/DreamUtils.ts';
import {primaryMoodCategories, topDreamTopics} from '../data/MockDailyHighlights';
import {getBackgroundStyle, getCardStyle, getTextStyle} from '../styles/StyleUtils';
import {formatDateFull, formatDateSimple} from '../utils/DateUtils';
import {formatDateFull} from '../utils/DateUtils';
import {NavLink} from 'react-router-dom';
import {DreamRecord} from "../components/DreamRecord.tsx";
import {DreamCardCompact} from "../components/DreamCardCompact.tsx";
import {DailyHighlights} from "../components/DailyHighlights.tsx";
export default function Home() {
const currentUser = MockUserMap.get(4); // Neo Quantum
@@ -62,17 +63,11 @@ export default function Home() {
{personalDreams.length > 0 ? (
<div className="space-y-2">
{personalDreams.map((dream, index) => (
<NavLink key={dream.id} to={`/dream/${dream.id}`}
className="block transition-all duration-300 hover:transform hover:scale-[1.02] hover:translate-y-[-2px] bg-[var(--bg)] shadow-md backdrop-blur-sm animate-fadeIn rounded-lg mb-2">
<div
className="p-2"
style={{animationDelay: `${index * 0.1}s`}}>
<h4 className="font-medium text-[var(--accent)] text-sm">{dream.title}</h4>
<p className="text-xs text-[var(--text-muted)]">
{formatDateSimple(dream.date)}
</p>
</div>
</NavLink>
<DreamCardCompact
key={dream.id}
dream={dream}
index={index}
/>
))}
</div>
) : (
@@ -92,77 +87,23 @@ export default function Home() {
{friendsDreams.map((dream, index) => {
const dreamUser = MockUserMap.get(dream.userId);
return (
<NavLink key={dream.id} to={`/dream/${dream.id}`}
className="block transition-all duration-300 hover:transform hover:scale-[1.02] hover:translate-y-[-2px] bg-[var(--bg)] shadow-md backdrop-blur-sm animate-fadeIn rounded-lg mb-2">
<div
className="p-2"
style={{animationDelay: `${index * 0.1}s`}}>
<div className="flex items-center mb-1">
<div
className="w-5 h-5 rounded-full mr-1 flex items-center justify-center overflow-hidden bg-[var(--accent-soft)] border border-[var(--accent)]">
{dreamUser?.profilePicture ? (
<img src={`/assets/profiles/${dreamUser.profilePicture}`}
alt={dreamUser.name} className="w-full h-full object-cover"/>
) : (
<span
className="text-xs text-[var(--text)]">{dreamUser?.name.charAt(0)}</span>
)}
</div>
<span
className="font-medium text-xs text-[var(--text)]">{dreamUser?.name}</span>
</div>
<h4 className="font-medium text-[var(--accent)] text-sm">{dream.title}</h4>
<p className="text-xs text-[var(--text-muted)]">
{formatDateSimple(dream.date)}
</p>
</div>
</NavLink>
<DreamCardCompact
key={dream.id}
dream={dream}
index={index}
showUser={true}
user={dreamUser}
/>
);
})}
</div>
</div>
</NavLink>
{/* Daily Highlights */
}
<div className={getCardStyle().className}
style={getCardStyle()}>
<h3 className="font-bold mb-3 dream-title">Tägliche Highlights</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="p-3 rounded-lg"
style={getBackgroundStyle('card')}>
<h4 className="font-medium mb-2" style={getTextStyle('accent')}>Top
Traumthemen</h4>
<ul className="list-disc pl-5 mb-4">
{topDreamTopics.map((topic, index) => (
<li key={index}
className="text-sm mb-1 transition-all duration-300 hover:transform hover:translate-x-1"
style={getTextStyle()}>
<span
style={{color: 'var(--accent-soft)'}}>{topic.label}:</span> {topic.percentage}%
</li>
))}
</ul>
</div>
<div className="p-3 rounded-lg"
style={getBackgroundStyle('card')}>
<h4 className="font-medium mb-2"
style={getTextStyle('accent')}>Stimmungskategorien</h4>
<ul className="list-disc pl-5">
{primaryMoodCategories.map((mood, index) => (
<li key={index}
className="text-sm mb-1 transition-all duration-300 hover:transform hover:translate-x-1"
style={getTextStyle()}>
<span
style={{color: 'var(--accent-soft)'}}>{mood.label}:</span> {mood.percentage}%
</li>
))}
</ul>
</div>
</div>
</div>
{/* Daily Highlights */}
<NavLink to='/archive'>
<DailyHighlights/>
</NavLink>
{/* Ad Banner */
}