99 lines
2.5 KiB
TypeScript
99 lines
2.5 KiB
TypeScript
import { useState } from 'react';
|
|
import { Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
|
|
import { useNotesStore } from '../../store/notes-store';
|
|
import { colors } from '../../theme';
|
|
|
|
export default function CaptureScreen() {
|
|
const [title, setTitle] = useState('');
|
|
const [body, setBody] = useState('');
|
|
const [saved, setSaved] = useState(false);
|
|
const saveDraft = useNotesStore((state) => state.saveDraft);
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<Text style={styles.title}>Quick capture</Text>
|
|
<Text style={styles.subtitle}>Create a lightweight mobile draft. Offline queue wiring comes in the next batch.</Text>
|
|
<TextInput
|
|
value={title}
|
|
onChangeText={(value: string) => {
|
|
setSaved(false);
|
|
setTitle(value);
|
|
}}
|
|
placeholder="Draft title"
|
|
placeholderTextColor="#7c8698"
|
|
style={styles.input}
|
|
/>
|
|
<TextInput
|
|
value={body}
|
|
onChangeText={(value: string) => {
|
|
setSaved(false);
|
|
setBody(value);
|
|
}}
|
|
placeholder="Capture a thought, task, or note"
|
|
placeholderTextColor="#7c8698"
|
|
style={[styles.input, styles.bodyInput]}
|
|
multiline
|
|
textAlignVertical="top"
|
|
/>
|
|
<Pressable
|
|
onPress={() => {
|
|
saveDraft(title, body);
|
|
setSaved(true);
|
|
setTitle('');
|
|
setBody('');
|
|
}}
|
|
style={styles.button}
|
|
>
|
|
<Text style={styles.buttonText}>Save draft</Text>
|
|
</Pressable>
|
|
{saved ? <Text style={styles.saved}>Draft saved locally in this scaffold step.</Text> : null}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
padding: 20,
|
|
backgroundColor: colors.bgCanvas,
|
|
gap: 14,
|
|
},
|
|
title: {
|
|
color: colors.textPrimary,
|
|
fontSize: 28,
|
|
fontWeight: '700',
|
|
},
|
|
subtitle: {
|
|
color: colors.textSecondary,
|
|
fontSize: 15,
|
|
lineHeight: 21,
|
|
},
|
|
input: {
|
|
borderWidth: 1,
|
|
borderColor: colors.borderDefault,
|
|
borderRadius: 12,
|
|
paddingHorizontal: 14,
|
|
paddingVertical: 12,
|
|
color: colors.textPrimary,
|
|
backgroundColor: colors.surfaceCard,
|
|
},
|
|
bodyInput: {
|
|
minHeight: 180,
|
|
},
|
|
button: {
|
|
backgroundColor: colors.accentPrimary,
|
|
borderRadius: 12,
|
|
paddingVertical: 14,
|
|
alignItems: 'center',
|
|
},
|
|
buttonText: {
|
|
color: '#EFF4FF',
|
|
fontWeight: '700',
|
|
},
|
|
saved: {
|
|
color: colors.success,
|
|
fontSize: 14,
|
|
fontWeight: '600',
|
|
},
|
|
});
|