From 153f5fd146f431aecb6eef163872a2c445b7b70a Mon Sep 17 00:00:00 2001 From: Matthias Puchstein Date: Sat, 12 Jul 2025 12:10:51 +0200 Subject: [PATCH] introduced `ChipOverview` route and component, refactored `Home` to use `DreamCardCompact` for streamlined rendering, and extracted `DailyHighlights` into a reusable component Signed-off-by: Matthias Puchstein --- src/App.tsx | 3 +- src/components/DailyHighlights.tsx | 99 +++++++++++++++++++++++++++++ src/components/DreamCardCompact.tsx | 57 +++++++++++++++++ src/pages/ChipOverview.tsx | 3 + src/pages/Home.tsx | 97 ++++++---------------------- 5 files changed, 180 insertions(+), 79 deletions(-) create mode 100644 src/components/DailyHighlights.tsx create mode 100644 src/components/DreamCardCompact.tsx create mode 100644 src/pages/ChipOverview.tsx diff --git a/src/App.tsx b/src/App.tsx index d9fd0f3..e1b298e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -10,6 +10,7 @@ import DreamPage from "./pages/DreamPage.tsx"; import ProfilePage from "./pages/ProfilePage.tsx"; import Home from "./pages/Home.tsx"; import Overview from "./pages/Overview.tsx"; +import ChipOverview from "./pages/ChipOverview.tsx"; function Archive() { return ( @@ -117,7 +118,7 @@ function AppContent() { }/> }/> }/> - }/> + }/> }/> }/> }/> diff --git a/src/components/DailyHighlights.tsx b/src/components/DailyHighlights.tsx new file mode 100644 index 0000000..60c4f30 --- /dev/null +++ b/src/components/DailyHighlights.tsx @@ -0,0 +1,99 @@ +import {primaryMoodCategories, topDreamTopics} from '../data/MockDailyHighlights'; +import {getCardStyle, getTextStyle} from '../styles/StyleUtils'; + +/** + * HighlightCard component displays a single highlight item with a colored progress bar + */ +interface HighlightItemProps { + label: string; + percentage: number; +} + +const HighlightCard = ({label, percentage}: HighlightItemProps) => { + return ( +
+
+
+ {label} + {percentage}% +
+
+
+
+
+
+
+
+ ); +}; + +/** + * DailyHighlights component displays the daily highlights section + * including top dream topics and mood categories + */ +export const DailyHighlights = () => { + return ( +
+

Tägliche Highlights

+ +
+
+

Top Traumthemen

+
+ {topDreamTopics.map((topic, index) => ( + + ))} +
+
+ +
+

Stimmungskategorien

+
+ {primaryMoodCategories.map((mood, index) => ( + + ))} +
+
+
+
+ ); +}; diff --git a/src/components/DreamCardCompact.tsx b/src/components/DreamCardCompact.tsx new file mode 100644 index 0000000..3a8fac8 --- /dev/null +++ b/src/components/DreamCardCompact.tsx @@ -0,0 +1,57 @@ +import {NavLink} from 'react-router-dom'; +import {formatDateSimple} from '../utils/DateUtils'; +import Dream from '../types/Dream'; +import User from '../types/User'; + +interface DreamCardCompactProps { + dream: Dream; + index: number; + showUser?: boolean; + user?: User; +} + +export const DreamCardCompact = ({dream, index, showUser = false, user}: DreamCardCompactProps) => { + return ( + +
+
+ {showUser && user && ( +
+
+
+ {user.profilePicture ? ( + {user.name} + ) : ( + {user.name.charAt(0)} + )} +
+ {user.name} +
+
+ )} +
+

{dream.title}

+

+ {formatDateSimple(dream.date)} +

+
+ {/* Add an empty div to balance the layout when user is shown */} + {showUser && user &&
} +
+
+ + ); +}; diff --git a/src/pages/ChipOverview.tsx b/src/pages/ChipOverview.tsx new file mode 100644 index 0000000..b425076 --- /dev/null +++ b/src/pages/ChipOverview.tsx @@ -0,0 +1,3 @@ +export default function ChipOverview() { + return <> +} \ No newline at end of file diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index b1f8ef6..d54dfb4 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -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 ? (
{personalDreams.map((dream, index) => ( - -
-

{dream.title}

-

- {formatDateSimple(dream.date)} -

-
- + ))}
) : ( @@ -92,77 +87,23 @@ export default function Home() { {friendsDreams.map((dream, index) => { const dreamUser = MockUserMap.get(dream.userId); return ( - -
-
-
- {dreamUser?.profilePicture ? ( - {dreamUser.name} - ) : ( - {dreamUser?.name.charAt(0)} - )} -
- {dreamUser?.name} -
-

{dream.title}

-

- {formatDateSimple(dream.date)} -

-
- + ); })} - {/* Daily Highlights */ - } -
-

Tägliche Highlights

- -
-
-

Top - Traumthemen

-
    - {topDreamTopics.map((topic, index) => ( -
  • - {topic.label}: {topic.percentage}% -
    • - ))} -
-
- -
-

Stimmungskategorien

-
    - {primaryMoodCategories.map((mood, index) => ( -
  • - {mood.label}: {mood.percentage}% -
    • - ))} -
-
-
-
+ {/* Daily Highlights */} + + + {/* Ad Banner */ }