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

added utility functions for date formatting and styling, refactored components to use reusable helpers

Browse Source 
Signed-off-by: Matthias Puchstein <matthias@puchstein.bayern>
This commit is contained in:
Matthias Puchstein
2025-07-09 23:40:21 +02:00
parent 4bb7f4c979
commit bb1d778600
7 changed files with 199 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/App.tsx
View File

@@ -4,6 +4,7 @@ import Navbar from './components/Navbar';
import TopBar from './components/TopBar';
import SplashScreen from './components/SplashScreen';
import {BrowserRouter, Route, Routes, useLocation} from 'react-router-dom';
import {formatDateSimple} from './utils/DateUtils';
import Feed from "./pages/Feed.tsx";
import DreamPage from "./pages/DreamPage.tsx";
import ProfilePage from "./pages/ProfilePage.tsx";
@@ -89,7 +90,7 @@ function Archive() {
Dream #{item}
</h3>
<span style={{ color: 'var(--text-muted)' }}>
{new Date().toLocaleDateString()}
{formatDateSimple(new Date())}
</span>
</div>
<p className="mb-4">

14
src/components/DreamCard.tsx
View File

@@ -3,6 +3,8 @@ import Dream from '../types/Dream';
import type User from "../types/User.ts";
import {NavLink} from "react-router-dom";
import {useEffect, useState} from "react";
import {getAccentStyle, getTextStyle} from '../styles/StyleUtils';
import {formatDateWithTime} from '../utils/DateUtils';
interface DreamCardProps {
dream: Dream;
@@ -32,28 +34,26 @@ export default function DreamCard({dream, user, animationDelay = 0}: DreamCardPr
style={{borderColor: 'var(--accent-soft)'}}
/>
<div className="absolute -bottom-1 -right-1 w-4 h-4 bg-accent rounded-full"
style={{backgroundColor: 'var(--accent)'}}></div>
style={getAccentStyle()}></div>
</div>
<span className="ml-4 font-semibold text-left">{user?.name} <span className="text-text-muted">hat geträumt:</span></span>
</div>
<h2 className="title text-left dreamy-text text-lg">
{dream.title}
</h2>
<p className="mt-2 line-clamp-2 text-left">
<p className="mt-2 line-clamp-2 text-left" style={getTextStyle()}>
{(dream.input.inputType === 'text' && dream.input.input)
|| (dream.input.inputType === 'audio' && dream.input.transcript)
|| (dream.input.inputType === 'image' && dream.input.description)}
</p>
<div className="flex justify-between items-center mt-3">
<p className="timestamp text-left">
{dream.date.toLocaleDateString('de-DE', {
day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit',
})}
<p className="timestamp text-left" style={getTextStyle('muted')}>
{formatDateWithTime(dream.date)}
</p>
<div className="flex space-x-2">
{/* Display dream type as a tag */}
<span className="px-2 py-1 text-xs rounded-full bg-accent-soft text-text"
style={{backgroundColor: 'var(--accent-soft)', color: 'var(--text)'}}>
style={getAccentStyle(true)}>
{dream.input.inputType}
</span>
</div>

13
src/components/TopBar.tsx
View File

@@ -1,6 +1,7 @@
import {useEffect, useState} from 'react';
import logotext from "../assets/logotext.svg";
import {NavLink} from "react-router-dom";
import {getBackgroundStyle, getTextStyle} from '../styles/StyleUtils';
export default function TopBar() {
const [visible, setVisible] = useState(true);
@@ -56,9 +57,7 @@ export default function TopBar() {
return (<div
className={`fixed top-0 left-0 right-0 py-2 md:py-3 px-3 md:px-4 flex items-center transition-transform duration-300 z-20 ${visible ? 'transform-none' : 'transform -translate-y-full'}`}
style={{
background: 'var(--accent-gradient)', boxShadow: '0 2px 10px var(--shadow)'
}}
style={getBackgroundStyle('topbar')}
>
<div className="flex items-center justify-between w-full max-w-6xl mx-auto">
<div className="flex items-center">
@@ -74,16 +73,14 @@ export default function TopBar() {
onClick={toggleTheme}
className="p-2 rounded-full focus:outline-none transition-transform hover:scale-110"
aria-label="Toggle theme"
style={{
backgroundColor: 'var(--card)', boxShadow: '0 2px 8px var(--shadow)'
}}
style={getBackgroundStyle('card')}
>
{darkMode ? (<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 md:h-6 md:w-6" fill="none"
viewBox="0 0 24 24" stroke="currentColor" style={{color: 'var(--accent)'}}>
viewBox="0 0 24 24" stroke="currentColor" style={getTextStyle('accent')}>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/>
</svg>) : (<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 md:h-6 md:w-6" fill="none"
viewBox="0 0 24 24" stroke="currentColor" style={{color: 'var(--accent-dark)'}}>
viewBox="0 0 24 24" stroke="currentColor" style={getTextStyle('accent')}>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/>
</svg>)}

13
src/pages/DreamPage.tsx
View File

@@ -5,6 +5,7 @@ import {mockDreams} from '../data/MockDreams';
import MockUsers from '../data/MockUsers';
import User from '../types/User';
import type Dream from "../types/Dream.ts";
import {formatDateNumeric, formatDateWithTime} from '../utils/DateUtils';
export default function DreamPage() {
const {id} = useParams<{ id: string }>();
@@ -48,13 +49,7 @@ export default function DreamPage() {
</h1>
{user && (<p className="mt-1 text-white/80 text-sm sm:text-base">
{user.name} •{' '}
{dream.date.toLocaleDateString('de-DE', {
day: '2-digit',
month: '2-digit',
year: 'numeric',
hour: '2-digit',
minute: '2-digit',
})}
{formatDateWithTime(dream.date)}
</p>)}
</div>
</div>
@@ -150,9 +145,7 @@ export default function DreamPage() {
<div className="flex flex-col sm:flex-row sm:justify-between">
<span className="font-medium mb-1 sm:mb-0">Datum</span>
<span>
{dream.date.toLocaleDateString('de-DE', {
day: '2-digit', month: '2-digit', year: 'numeric',
})}
{formatDateNumeric(dream.date)}
</span>
</div>
</div>

109
src/pages/Home.tsx
View File

@@ -3,17 +3,14 @@ import {mockDreams} from '../data/MockDreams';
import {MockUserMap} from '../data/MockUsers';
import {getSortedDreamsByDate} from '../data/DreamUtils';
import {primaryMoodCategories, topDreamTopics} from '../data/MockDailyHighlights';
import {getAccentStyle, getBackgroundStyle, getCardStyle, getTextStyle} from '../styles/StyleUtils';
import {formatDateFull, formatDateSimple} from '../utils/DateUtils';
export default function Home() {
const [inputMode, setInputMode] = useState<'text' | 'drawing'>('text');
const currentUser = MockUserMap.get(4); // Neo Quantum
const currentDate = new Date();
const formattedDate = currentDate.toLocaleDateString('de-DE', {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric'
});
const formattedDate = formatDateFull(currentDate);
// Get personal dreams (latest 3 for user ID 4)
const personalDreams = getSortedDreamsByDate(
@@ -29,21 +26,17 @@ export default function Home() {
<div className="p-4 dream-container backdrop-blur-md bg-opacity-30"
style={{backgroundColor: 'transparent', boxShadow: '0 10px 30px var(--shadow)'}}>
{/* Welcome Card */}
<div className="dreamy-card p-4 mb-4 transition-all duration-300 hover:transform hover:scale-[1.01]"
style={{backgroundColor: 'var(--card)', color: 'var(--text)'}}>
<div className={getCardStyle().className}
style={getCardStyle()}>
<h1 className="text-2xl font-bold mb-2 dream-title">Hallo Neo!</h1>
<p className="text-sm" style={{color: 'var(--text-muted)'}}>{formattedDate}</p>
<p className="mt-2" style={{color: 'var(--text)'}}>Willkommen zurück in deiner Traumwelt.</p>
<p className="text-sm" style={getTextStyle('muted')}>{formattedDate}</p>
<p className="mt-2" style={getTextStyle()}>Willkommen zurück in deiner Traumwelt.</p>
</div>
{/* Streak Notification */}
<div
className="dreamy-card p-4 mb-4 transition-all duration-300 hover:transform hover:scale-[1.01] floating"
style={{
background: 'var(--accent-gradient)',
color: 'white',
boxShadow: '0 10px 30px var(--shadow), inset 0 0 15px rgba(166, 77, 255, 0.3)'
}}>
className={getCardStyle(true).className}
style={getBackgroundStyle('accent-gradient')}>
<div className="flex items-center">
<div className="mr-3">
<svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8" fill="none" viewBox="0 0 24 24"
@@ -60,28 +53,22 @@ export default function Home() {
</div>
{/* Input Card */}
<div className="dreamy-card p-4 mb-4 transition-all duration-300 hover:transform hover:scale-[1.01]"
style={{backgroundColor: 'var(--card)', color: 'var(--text)'}}>
<div className={getCardStyle().className}
style={getCardStyle()}>
<div className="flex justify-between items-center mb-3">
<h3 className="font-bold dream-title">Neuer Traum</h3>
<div className="flex rounded-lg overflow-hidden" style={{border: '1px solid var(--accent-soft)'}}>
<button
className={`px-3 py-1 text-sm transition-all duration-200`}
onClick={() => setInputMode('text')}
style={{
backgroundColor: inputMode === 'text' ? 'var(--accent)' : 'transparent',
color: inputMode === 'text' ? 'white' : 'var(--text)'
}}
style={getAccentStyle(false, inputMode === 'text')}
>
Text
</button>
<button
className={`px-3 py-1 text-sm transition-all duration-200`}
onClick={() => setInputMode('drawing')}
style={{
backgroundColor: inputMode === 'drawing' ? 'var(--accent)' : 'transparent',
color: inputMode === 'drawing' ? 'white' : 'var(--text)'
}}
style={getAccentStyle(false, inputMode === 'drawing')}
>
Zeichnung
</button>
@@ -94,8 +81,8 @@ export default function Home() {
rows={4}
placeholder="Beschreibe deinen Traum..."
style={{
backgroundColor: 'var(--bg)',
color: 'var(--text)',
...getBackgroundStyle('normal'),
...getTextStyle(),
border: '1px solid var(--accent-soft)'
}}
></textarea>
@@ -103,17 +90,17 @@ export default function Home() {
<div
className="w-full h-40 rounded-lg mb-3 flex items-center justify-center border-2 border-dashed transition-all duration-200"
style={{
backgroundColor: 'var(--bg)',
...getBackgroundStyle('normal'),
borderColor: 'var(--accent-soft)'
}}>
<p style={{color: 'var(--text-muted)'}}>Zeichne deinen Traum hier (Canvas-Platzhalter)</p>
<p style={getTextStyle('muted')}>Zeichne deinen Traum hier (Canvas-Platzhalter)</p>
</div>
)}
<div className="flex justify-between">
<div className="flex space-x-2">
<button className="p-2 rounded-full transition-all duration-200 hover:transform hover:scale-110"
style={{backgroundColor: 'var(--accent-soft)', color: 'var(--text)'}}>
style={getAccentStyle(true)}>
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
@@ -121,7 +108,7 @@ export default function Home() {
</svg>
</button>
<button className="p-2 rounded-full transition-all duration-200 hover:transform hover:scale-110"
style={{backgroundColor: 'var(--accent-soft)', color: 'var(--text)'}}>
style={getAccentStyle(true)}>
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
@@ -130,15 +117,15 @@ export default function Home() {
</button>
</div>
<button className="px-4 py-2 rounded-lg transition-all duration-200 hover:transform hover:scale-105"
style={{background: 'var(--accent-gradient)', color: 'white'}}>
style={getBackgroundStyle('accent-gradient')}>
Senden
</button>
</div>
</div>
{/* Personal Feed */}
<div className="dreamy-card p-4 mb-4 transition-all duration-300 hover:transform hover:scale-[1.01]"
style={{backgroundColor: 'var(--card)', color: 'var(--text)'}}>
<div className={getCardStyle().className}
style={getCardStyle()}>
<h3 className="font-bold mb-3 dream-title">Deine letzten Träume</h3>
{personalDreams.length > 0 ? (
<div className="space-y-3">
@@ -146,27 +133,26 @@ export default function Home() {
<div key={dream.id}
className="p-3 rounded-lg transition-all duration-300 hover:transform hover:scale-[1.02]"
style={{
backgroundColor: 'var(--bg)',
boxShadow: '0 4px 15px var(--shadow)',
...getBackgroundStyle('card'),
animationDelay: `${index * 0.1}s`
}}>
<h4 className="font-medium" style={{color: 'var(--accent)'}}>{dream.title}</h4>
<p className="text-sm" style={{color: 'var(--text-muted)'}}>
{dream.date.toLocaleDateString('de-DE')}
<h4 className="font-medium" style={getTextStyle('accent')}>{dream.title}</h4>
<p className="text-sm" style={getTextStyle('muted')}>
{formatDateSimple(dream.date)}
</p>
</div>
))}
</div>
) : (
<p className="text-sm" style={{color: 'var(--text-muted)'}}>
<p className="text-sm" style={getTextStyle('muted')}>
Du hast noch keine Träume aufgezeichnet. Starte jetzt!
</p>
)}
</div>
{/* Friends Feed */}
<div className="dreamy-card p-4 mb-4 transition-all duration-300 hover:transform hover:scale-[1.01]"
style={{backgroundColor: 'var(--card)', color: 'var(--text)'}}>
<div className={getCardStyle().className}
style={getCardStyle()}>
<h3 className="font-bold mb-3 dream-title">Träume von Freunden</h3>
<div className="space-y-3">
{friendsDreams.map((dream, index) => {
@@ -175,8 +161,7 @@ export default function Home() {
<div key={dream.id}
className="p-3 rounded-lg transition-all duration-300 hover:transform hover:scale-[1.02]"
style={{
backgroundColor: 'var(--bg)',
boxShadow: '0 4px 15px var(--shadow)',
...getBackgroundStyle('card'),
animationDelay: `${index * 0.1}s`
}}>
<div className="flex items-center mb-1">
@@ -191,15 +176,15 @@ export default function Home() {
alt={dreamUser.name} className="w-full h-full object-cover"/>
) : (
<span className="text-xs"
style={{color: 'var(--text)'}}>{dreamUser?.name.charAt(0)}</span>
style={getTextStyle()}>{dreamUser?.name.charAt(0)}</span>
)}
</div>
<span className="font-medium text-sm"
style={{color: 'var(--text)'}}>{dreamUser?.name}</span>
style={getTextStyle()}>{dreamUser?.name}</span>
</div>
<h4 className="font-medium" style={{color: 'var(--accent)'}}>{dream.title}</h4>
<p className="text-sm" style={{color: 'var(--text-muted)'}}>
{dream.date.toLocaleDateString('de-DE')}
<h4 className="font-medium" style={getTextStyle('accent')}>{dream.title}</h4>
<p className="text-sm" style={getTextStyle('muted')}>
{formatDateSimple(dream.date)}
</p>
</div>
);
@@ -208,19 +193,19 @@ export default function Home() {
</div>
{/* Daily Highlights */}
<div className="dreamy-card p-4 mb-4 transition-all duration-300 hover:transform hover:scale-[1.01]"
style={{backgroundColor: 'var(--card)', color: 'var(--text)'}}>
<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={{backgroundColor: 'var(--bg)', boxShadow: '0 4px 15px var(--shadow)'}}>
<h4 className="font-medium mb-2" style={{color: 'var(--accent)'}}>Top Traumthemen</h4>
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={{color: 'var(--text)'}}>
style={getTextStyle()}>
<span style={{color: 'var(--accent-soft)'}}>{topic.label}:</span> {topic.percentage}%
</li>
))}
@@ -228,13 +213,13 @@ export default function Home() {
</div>
<div className="p-3 rounded-lg"
style={{backgroundColor: 'var(--bg)', boxShadow: '0 4px 15px var(--shadow)'}}>
<h4 className="font-medium mb-2" style={{color: 'var(--accent)'}}>Stimmungskategorien</h4>
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={{color: 'var(--text)'}}>
style={getTextStyle()}>
<span style={{color: 'var(--accent-soft)'}}>{mood.label}:</span> {mood.percentage}%
</li>
))}
@@ -245,12 +230,8 @@ export default function Home() {
{/* Ad Banner */}
<div
className="dreamy-card p-4 mb-4 transition-all duration-300 hover:transform hover:scale-[1.01] floating"
style={{
background: 'linear-gradient(135deg, var(--accent), var(--accent-dark))',
color: 'white',
boxShadow: '0 10px 30px var(--shadow), inset 0 0 15px rgba(166, 77, 255, 0.3)'
}}>
className={getCardStyle(true).className}
style={getBackgroundStyle('gradient')}>
<div className="flex flex-col sm:flex-row items-center">
<div className="mb-4 sm:mb-0 sm:mr-4 transition-all duration-300 hover:transform hover:rotate-12">
<svg xmlns="http://www.w3.org/2000/svg" className="h-16 w-16" fill="none" viewBox="0 0 24 24"

83
src/styles/StyleUtils.ts Normal file
View File

@@ -0,0 +1,83 @@
/**
* Utility functions for consistent styling across components
*/
/**
* Returns the base style for dreamy cards
* @param floating - Whether the card should have a floating animation
* @returns Object with style properties
*/
export const getCardStyle = (floating: boolean = false) => {
return {
backgroundColor: 'var(--card)',
color: 'var(--text)',
className: `dreamy-card p-4 mb-4 transition-all duration-300 hover:transform hover:scale-[1.01] ${floating ? 'floating' : ''}`
};
};
/**
* Returns the style for accent-colored elements
* @param soft - Whether to use the soft accent color
* @param isActive - Whether the element is in active state
* @returns Object with style properties
*/
export const getAccentStyle = (soft: boolean = false, isActive: boolean = true) => {
if (!isActive) {
return {
backgroundColor: 'transparent',
color: 'var(--text)'
};
}
return {
backgroundColor: soft ? 'var(--accent-soft)' : 'var(--accent)',
color: soft ? 'var(--text)' : 'white'
};
};
/**
* Returns the style for text elements
* @param type - The type of text (normal, muted, accent)
* @returns Object with style properties
*/
export const getTextStyle = (type: 'normal' | 'muted' | 'accent' = 'normal') => {
switch (type) {
case 'muted':
return {color: 'var(--text-muted)'};
case 'accent':
return {color: 'var(--accent)'};
default:
return {color: 'var(--text)'};
}
};
/**
* Returns the style for background elements
* @param type - The type of background (normal, card, gradient)
* @returns Object with style properties
*/
export const getBackgroundStyle = (type: 'normal' | 'card' | 'gradient' | 'accent-gradient' | 'topbar' = 'normal') => {
switch (type) {
case 'card':
return {backgroundColor: 'var(--bg)', boxShadow: '0 4px 15px var(--shadow)'};
case 'gradient':
return {
background: 'linear-gradient(135deg, var(--accent), var(--accent-dark))',
color: 'white',
boxShadow: '0 10px 30px var(--shadow), inset 0 0 15px rgba(166, 77, 255, 0.3)'
};
case 'accent-gradient':
return {
background: 'var(--accent-gradient)',
color: 'white',
boxShadow: '0 10px 30px var(--shadow), inset 0 0 15px rgba(166, 77, 255, 0.3)'
};
case 'topbar':
return {
background: 'var(--accent-gradient)',
boxShadow: '0 2px 10px var(--shadow)'
};
default:
return {backgroundColor: 'var(--bg)'};
}
};

54
src/utils/DateUtils.ts Normal file
View File

@@ -0,0 +1,54 @@
/**
* Utility functions for date formatting
*/
/**
* Formats a date with full details including weekday and month names
* @param date - The date to format
* @returns Formatted date string (e.g., "Montag, 1. Januar 2023")
*/
export const formatDateFull = (date: Date): string => {
return date.toLocaleDateString('de-DE', {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric'
});
};
/**
* Formats a date in a simple format
* @param date - The date to format
* @returns Formatted date string (e.g., "01.01.2023")
*/
export const formatDateSimple = (date: Date): string => {
return date.toLocaleDateString('de-DE');
};
/**
* Formats a date with time
* @param date - The date to format
* @returns Formatted date and time string (e.g., "01.01.2023, 14:30")
*/
export const formatDateWithTime = (date: Date): string => {
return date.toLocaleDateString('de-DE', {
day: '2-digit',
month: '2-digit',
year: 'numeric',
hour: '2-digit',
minute: '2-digit',
});
};
/**
* Formats a date in a numeric format without time
* @param date - The date to format
* @returns Formatted date string (e.g., "01.01.2023")
*/
export const formatDateNumeric = (date: Date): string => {
return date.toLocaleDateString('de-DE', {
day: '2-digit',
month: '2-digit',
year: 'numeric',
});
};