modularized the Record component into a standalone file Record.tsx, updated Home and App to reflect the changes, and streamlined styles in SplashScreen for consistency and dynamic theming
Signed-off-by: Matthias Puchstein <matthias@puchstein.bayern>
This commit is contained in:
Matthias Puchstein
@@ -1,13 +1,11 @@
|
||||
import {useState} from 'react';
|
||||
import {mockDreams} from '../data/MockDreams';
|
||||
import {MockUserMap} from '../data/MockUsers';
|
||||
import {getSortedDreamsByDate} from '../utils/DreamUtils.ts';
|
||||
import {primaryMoodCategories, topDreamTopics} from '../data/MockDailyHighlights';
|
||||
import {getAccentStyle, getBackgroundStyle, getCardStyle, getTextStyle} from '../styles/StyleUtils';
|
||||
import {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 = formatDateFull(currentDate);
|
||||
@@ -52,77 +50,6 @@ export default function Home() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Input Card */}
|
||||
<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={getAccentStyle(false, inputMode === 'text')}
|
||||
>
|
||||
Text
|
||||
</button>
|
||||
<button
|
||||
className={`px-3 py-1 text-sm transition-all duration-200`}
|
||||
onClick={() => setInputMode('drawing')}
|
||||
style={getAccentStyle(false, inputMode === 'drawing')}
|
||||
>
|
||||
Zeichnung
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{inputMode === 'text' ? (
|
||||
<textarea
|
||||
className="w-full p-3 rounded-lg mb-3 transition-all duration-200"
|
||||
rows={4}
|
||||
placeholder="Beschreibe deinen Traum..."
|
||||
style={{
|
||||
...getBackgroundStyle('normal'),
|
||||
...getTextStyle(),
|
||||
border: '1px solid var(--accent-soft)'
|
||||
}}
|
||||
></textarea>
|
||||
) : (
|
||||
<div
|
||||
className="w-full h-40 rounded-lg mb-3 flex items-center justify-center border-2 border-dashed transition-all duration-200"
|
||||
style={{
|
||||
...getBackgroundStyle('normal'),
|
||||
borderColor: 'var(--accent-soft)'
|
||||
}}>
|
||||
<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={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}
|
||||
d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button className="p-2 rounded-full transition-all duration-200 hover:transform hover:scale-110"
|
||||
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}
|
||||
d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<button className="px-4 py-2 rounded-lg transition-all duration-200 hover:transform hover:scale-105"
|
||||
style={getBackgroundStyle('accent-gradient')}>
|
||||
Senden
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Personal Feed */}
|
||||
<div className={getCardStyle().className}
|
||||
style={getCardStyle()}>
|
||||
|
||||
78
src/pages/Record.tsx
Normal file
78
src/pages/Record.tsx
Normal file
@@ -0,0 +1,78 @@
|
||||
import {getAccentStyle, getBackgroundStyle, getCardStyle, getTextStyle} from "../styles/StyleUtils.ts";
|
||||
import {useState} from "react";
|
||||
|
||||
export function Record() {
|
||||
const [inputMode, setInputMode] = useState<'text' | 'drawing'>('text');
|
||||
|
||||
return (
|
||||
<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={getAccentStyle(false, inputMode === 'text')}
|
||||
>
|
||||
Text
|
||||
</button>
|
||||
<button
|
||||
className={`px-3 py-1 text-sm transition-all duration-200`}
|
||||
onClick={() => setInputMode('drawing')}
|
||||
style={getAccentStyle(false, inputMode === 'drawing')}
|
||||
>
|
||||
Zeichnung
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{inputMode === 'text' ? (
|
||||
<textarea
|
||||
className="w-full p-3 rounded-lg mb-3 transition-all duration-200"
|
||||
rows={4}
|
||||
placeholder="Beschreibe deinen Traum..."
|
||||
style={{
|
||||
...getBackgroundStyle('normal'),
|
||||
...getTextStyle(),
|
||||
border: '1px solid var(--accent-soft)'
|
||||
}}
|
||||
></textarea>
|
||||
) : (
|
||||
<div
|
||||
className="w-full h-40 rounded-lg mb-3 flex items-center justify-center border-2 border-dashed transition-all duration-200"
|
||||
style={{
|
||||
...getBackgroundStyle('normal'),
|
||||
borderColor: 'var(--accent-soft)'
|
||||
}}>
|
||||
<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={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}
|
||||
d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button className="p-2 rounded-full transition-all duration-200 hover:transform hover:scale-110"
|
||||
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}
|
||||
d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<button className="px-4 py-2 rounded-lg transition-all duration-200 hover:transform hover:scale-105"
|
||||
style={getBackgroundStyle('accent-gradient')}>
|
||||
Senden
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user