Skip to content
This repository was archived by the owner on May 5, 2025. It is now read-only.

Commit d588880

Browse files
bakaqcbakaqc
committed
feat: add calendar and reminder settings components with integration options
1 parent c4f5d2a commit d588880

File tree

7 files changed

+432
-175
lines changed

7 files changed

+432
-175
lines changed

‎bun.lock‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
"name": "gift-idea-tracker",
66
"dependencies": {
77
"@expo/vector-icons": "14.1.0",
8+
"@react-native-community/datetimepicker": "^8.3.0",
89
"expo": "52.0.46",
910
"expo-fast-image": "^1.1.3",
1011
"expo-linking": "7.0.5",
@@ -384,6 +385,8 @@
384385

385386
"@radix-ui/react-slot": ["@radix-ui/[email protected]", "", { "dependencies": { "@babel/runtime": "^7.13.10", "@radix-ui/react-compose-refs": "1.0.0" }, "peerDependencies": { "react": "^16.8 || ^17.0 || ^18.0" } }, "sha512-avutXAFL1ehGvAXtPquu0YK5oz6ctS474iM3vNGQIkswrVhdrS52e3uoMQBzZhNRAIE0jBnUyXWNmSjGHhCFcw=="],
386387

388+
"@react-native-community/datetimepicker": ["@react-native-community/[email protected]", "", { "dependencies": { "invariant": "^2.2.4" }, "peerDependencies": { "expo": ">=50.0.0", "react": "*", "react-native": "*", "react-native-windows": "*" }, "optionalPeers": ["expo", "react-native-windows"] }, "sha512-K/KgaJbLtjMpx4PaG4efrVIcSe6+DbLufeX1lwPB5YY8i3sq9dOh6WcAcMTLbaRTUpurebQTkl7puHPFm9GalA=="],
389+
387390
"@react-native/assets-registry": ["@react-native/[email protected]", "", {}, "sha512-pN0Ws5xsjWOZ8P37efh0jqHHQmq+oNGKT4AyAoKRpxBDDDmlAmpaYjer9Qz7PpDKF+IUyRjF/+rBsM50a8JcUg=="],
388391

389392
"@react-native/babel-plugin-codegen": ["@react-native/[email protected]", "", { "dependencies": { "@react-native/codegen": "0.76.9" } }, "sha512-vxL/vtDEIYHfWKm5oTaEmwcnNGsua/i9OjIxBDBFiJDu5i5RU3bpmDiXQm/bJxrJNPRp5lW0I0kpGihVhnMAIQ=="],

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,9 @@
99
},
1010
"dependencies": {
1111
"@expo/vector-icons": "14.1.0",
12+
"@react-native-community/datetimepicker": "8.3.0",
1213
"expo": "52.0.46",
13-
"expo-fast-image": "^1.1.3",
14+
"expo-fast-image": "1.1.3",
1415
"expo-linking": "7.0.5",
1516
"expo-router": "4.0.20",
1617
"expo-splash-screen": "0.29.24",

‎src/app/(gifts)/add-gift.tsx‎

Lines changed: 188 additions & 159 deletions
Original file line numberDiff line numberDiff line change
@@ -1,179 +1,208 @@
1+
import React, { useState } from 'react';
12
import { Ionicons } from '@expo/vector-icons';
23
import { useNavigation } from 'expo-router';
3-
import { useState } from 'react';
44
import {
5-
Pressable,
6-
ScrollView,
7-
StyleSheet,
8-
Text,
9-
TextInput,
10-
View,
5+
Pressable,
6+
ScrollView,
7+
StyleSheet,
8+
Text,
9+
TextInput,
10+
View,
1111
} from 'react-native';
12+
import DateTimePicker from '@react-native-community/datetimepicker';
1213

1314
const AddGiftScreen = () => {
14-
const navigation = useNavigation();
15-
const [title, setTitle] = useState('');
16-
const [description, setDescription] = useState('');
17-
const [recipient, setRecipient] = useState('');
18-
const [selectedDate, setSelectedDate] = useState(new Date());
15+
const navigation = useNavigation();
16+
const [title, setTitle] = useState('');
17+
const [description, setDescription] = useState('');
18+
const [price, setPrice] = useState(0);
19+
const [recipient, setRecipient] = useState('');
20+
const [selectedDate, setSelectedDate] = useState(new Date());
21+
const [showPicker, setShowPicker] = useState(false);
1922

20-
const handleAddGift = () => {
21-
console.log({ title, description, recipient, selectedDate });
22-
navigation.goBack();
23-
};
23+
const handleAddGift = () => {
24+
console.log({ title, description, recipient, selectedDate });
25+
navigation.goBack();
26+
};
2427

25-
return (
26-
<View style={styles.container}>
27-
<ScrollView style={styles.scrollView}>
28-
<View style={styles.inputGroup}>
29-
<Text style={styles.label}>Title</Text>
30-
<TextInput
31-
style={styles.input}
32-
placeholder="Enter title"
33-
value={title}
34-
onChangeText={setTitle}
35-
/>
36-
</View>
28+
const onChangeDate = (event: any, selectedDate: any) => {
29+
setShowPicker(false);
30+
if (selectedDate) {
31+
setSelectedDate(selectedDate);
32+
}
33+
};
3734

38-
<View style={styles.inputGroup}>
39-
<Text style={styles.label}>Description</Text>
40-
<TextInput
41-
style={[styles.input, styles.textArea]}
42-
placeholder="Enter description"
43-
value={description}
44-
onChangeText={setDescription}
45-
multiline
46-
numberOfLines={4}
47-
/>
48-
</View>
35+
return (
36+
<View style={styles.container}>
37+
<ScrollView style={styles.scrollView}>
38+
<View style={styles.inputGroup}>
39+
<Text style={styles.label}>Title</Text>
40+
<TextInput
41+
style={styles.input}
42+
placeholder="Enter title"
43+
value={title}
44+
onChangeText={setTitle}
45+
/>
46+
</View>
4947

50-
<View style={styles.inputGroup}>
51-
<Text style={styles.label}>Image</Text>
52-
<Pressable style={styles.uploadButton}>
53-
<Ionicons name="cloud-upload-outline" size={24} color="#666" />
54-
<Text style={styles.uploadText}>Upload Image</Text>
55-
</Pressable>
56-
</View>
48+
<View style={styles.inputGroup}>
49+
<Text style={styles.label}>Description</Text>
50+
<TextInput
51+
style={[styles.input, styles.textArea]}
52+
placeholder="Enter description"
53+
value={description}
54+
onChangeText={setDescription}
55+
multiline
56+
numberOfLines={4}
57+
/>
58+
</View>
5759

58-
<View style={styles.inputGroup}>
59-
<Text style={styles.label}>Choose Recipient</Text>
60-
<Pressable style={styles.select}>
61-
<Text style={styles.selectText}>Choose Recipient</Text>
62-
<Ionicons name="chevron-down" size={24} color="#666" />
63-
</Pressable>
64-
</View>
60+
<View style={styles.inputGroup}>
61+
<Text style={styles.label}>Price</Text>
62+
<TextInput
63+
style={styles.input}
64+
placeholder="Enter price"
65+
value={String(price)}
66+
onChangeText={(text) => setPrice(Number(text))}
67+
keyboardType="numeric"
68+
/>
69+
</View>
6570

66-
<View style={styles.inputGroup}>
67-
<Text style={styles.label}>Choose Time Event</Text>
68-
<Pressable style={styles.select}>
69-
<Text style={styles.selectText}>Choose time</Text>
70-
<Ionicons name="chevron-down" size={24} color="#666" />
71-
</Pressable>
72-
</View>
71+
<View style={styles.inputGroup}>
72+
<Text style={styles.label}>Image</Text>
73+
<Pressable style={styles.uploadButton}>
74+
<Ionicons name="cloud-upload-outline" size={24} color="#666" />
75+
<Text style={styles.uploadText}>Choose Image</Text>
76+
</Pressable>
77+
</View>
7378

74-
<Pressable style={styles.addButton} onPress={handleAddGift}>
75-
<Text style={styles.addButtonText}>Add Gift Idea</Text>
76-
</Pressable>
79+
<View style={styles.inputGroup}>
80+
<Text style={styles.label}>Choose Recipient</Text>
81+
<Pressable style={styles.select}>
82+
<Text style={styles.selectText}>Choose Recipient</Text>
83+
<Ionicons name="chevron-down" size={24} color="#666" />
84+
</Pressable>
85+
</View>
7786

78-
<Pressable
79-
style={styles.cancelButton}
80-
onPress={() => navigation.goBack()}
81-
>
82-
<Text style={styles.cancelButtonText}>Cancel</Text>
83-
</Pressable>
84-
</ScrollView>
85-
</View>
86-
);
87+
<View style={styles.inputGroup}>
88+
<Text style={styles.label}>Choose Time Event</Text>
89+
<Pressable
90+
style={styles.select}
91+
onPress={() => setShowPicker(true)}
92+
>
93+
<Text style={styles.selectText}>
94+
{selectedDate.toLocaleString()}
95+
</Text>
96+
<Ionicons name="chevron-down" size={24} color="#666" />
97+
</Pressable>
98+
99+
{showPicker && (
100+
<DateTimePicker
101+
value={selectedDate}
102+
mode="datetime"
103+
display="default"
104+
onChange={onChangeDate}
105+
/>
106+
)}
107+
</View>
108+
109+
<Pressable style={styles.addButton} onPress={handleAddGift}>
110+
<Text style={styles.addButtonText}>Add Gift Idea</Text>
111+
</Pressable>
112+
113+
<Pressable
114+
style={styles.cancelButton}
115+
onPress={() => navigation.goBack()}
116+
>
117+
<Text style={styles.cancelButtonText}>Cancel</Text>
118+
</Pressable>
119+
</ScrollView>
120+
</View>
121+
);
87122
};
88123

89124
const styles = StyleSheet.create({
90-
container: {
91-
flex: 1,
92-
backgroundColor: '#F8F9FA',
93-
paddingVertical: 16,
94-
},
95-
scrollView: {
96-
flex: 1,
97-
padding: 16,
98-
},
99-
header: {
100-
fontSize: 24,
101-
fontWeight: '600',
102-
marginBottom: 24,
103-
color: '#333333',
104-
},
105-
inputGroup: {
106-
marginBottom: 20,
107-
},
108-
label: {
109-
fontSize: 16,
110-
color: '#666666',
111-
marginBottom: 8,
112-
},
113-
input: {
114-
backgroundColor: 'white',
115-
borderRadius: 8,
116-
padding: 12,
117-
fontSize: 16,
118-
borderWidth: 1,
119-
borderColor: '#DDDDDD',
120-
},
121-
textArea: {
122-
height: 100,
123-
textAlignVertical: 'top',
124-
},
125-
uploadButton: {
126-
backgroundColor: 'white',
127-
borderRadius: 8,
128-
padding: 12,
129-
flexDirection: 'row',
130-
alignItems: 'center',
131-
justifyContent: 'center',
132-
borderWidth: 1,
133-
borderColor: '#DDDDDD',
134-
},
135-
uploadText: {
136-
marginLeft: 8,
137-
fontSize: 16,
138-
color: '#666666',
139-
},
140-
select: {
141-
backgroundColor: 'white',
142-
borderRadius: 8,
143-
padding: 12,
144-
flexDirection: 'row',
145-
alignItems: 'center',
146-
justifyContent: 'space-between',
147-
borderWidth: 1,
148-
borderColor: '#DDDDDD',
149-
},
150-
selectText: {
151-
fontSize: 16,
152-
color: '#666666',
153-
},
154-
addButton: {
155-
backgroundColor: '#4B6BFB',
156-
borderRadius: 8,
157-
padding: 16,
158-
alignItems: 'center',
159-
marginTop: 24,
160-
},
161-
addButtonText: {
162-
color: 'white',
163-
fontSize: 16,
164-
fontWeight: '600',
165-
},
166-
cancelButton: {
167-
backgroundColor: '#F8F9FA',
168-
borderRadius: 8,
169-
padding: 16,
170-
alignItems: 'center',
171-
marginTop: 12,
172-
},
173-
cancelButtonText: {
174-
color: '#666666',
175-
fontSize: 16,
176-
},
125+
container: {
126+
flex: 1,
127+
backgroundColor: '#F8F9FA',
128+
paddingVertical: 16,
129+
},
130+
scrollView: {
131+
flex: 1,
132+
padding: 16,
133+
},
134+
inputGroup: {
135+
marginBottom: 20,
136+
},
137+
label: {
138+
fontSize: 16,
139+
color: '#666666',
140+
marginBottom: 8,
141+
},
142+
input: {
143+
backgroundColor: 'white',
144+
borderRadius: 8,
145+
padding: 12,
146+
fontSize: 16,
147+
borderWidth: 1,
148+
borderColor: '#DDDDDD',
149+
},
150+
textArea: {
151+
height: 100,
152+
textAlignVertical: 'top',
153+
},
154+
uploadButton: {
155+
backgroundColor: 'white',
156+
borderRadius: 8,
157+
padding: 12,
158+
flexDirection: 'row',
159+
alignItems: 'center',
160+
justifyContent: 'center',
161+
borderWidth: 1,
162+
borderColor: '#DDDDDD',
163+
},
164+
uploadText: {
165+
marginLeft: 8,
166+
fontSize: 16,
167+
color: '#666666',
168+
},
169+
select: {
170+
backgroundColor: 'white',
171+
borderRadius: 8,
172+
padding: 12,
173+
flexDirection: 'row',
174+
alignItems: 'center',
175+
justifyContent: 'space-between',
176+
borderWidth: 1,
177+
borderColor: '#DDDDDD',
178+
},
179+
selectText: {
180+
fontSize: 16,
181+
color: '#666666',
182+
},
183+
addButton: {
184+
backgroundColor: '#4B6BFB',
185+
borderRadius: 8,
186+
padding: 16,
187+
alignItems: 'center',
188+
marginTop: 24,
189+
},
190+
addButtonText: {
191+
color: 'white',
192+
fontSize: 16,
193+
fontWeight: '600',
194+
},
195+
cancelButton: {
196+
backgroundColor: '#F8F9FA',
197+
borderRadius: 8,
198+
padding: 16,
199+
alignItems: 'center',
200+
marginTop: 12,
201+
},
202+
cancelButtonText: {
203+
color: '#666666',
204+
fontSize: 16,
205+
},
177206
});
178207

179208
export default AddGiftScreen;

0 commit comments

Comments
 (0)