added utility functions for date formatting and styling, refactored components to use reusable helpers
Signed-off-by: Matthias Puchstein <matthias@puchstein.bayern>
This commit is contained in:
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user