1
1
import React from 'react' ;
2
- import { View , Text , StyleSheet , Image , Switch } from 'react-native' ;
2
+ import { Button , Image , StyleSheet , Switch , Text , View } from 'react-native' ;
3
3
4
- const CalendarIntegration = ( ) => {
5
- const [ googleEnabled , setGoogleEnabled ] = React . useState ( false ) ;
6
- const [ appleEnabled , setAppleEnabled ] = React . useState ( false ) ;
4
+ interface CalendarIntegrationProps {
5
+ onIntegrate ?: ( ) => void ;
6
+ }
7
7
8
- return (
9
- < View style = { styles . container } >
10
- < Text style = { styles . sectionTitle } > Calendar Integration</ Text >
11
- < View style = { styles . integrationItem } >
12
- < Image
13
- source = { { uri : 'https://www.gstatic.com/calendar/images/dynamiclogo_2020q4/calendar_31_2x.png' } }
14
- style = { styles . calendarIcon }
15
- />
16
- < Text style = { styles . integrationText } > Connect with Google Calendar</ Text >
17
- < Switch
18
- value = { googleEnabled }
19
- onValueChange = { setGoogleEnabled }
20
- trackColor = { { false : '#767577' , true : '#4285F4' } }
21
- />
22
- </ View >
8
+ const CalendarIntegration : React . FC < CalendarIntegrationProps > = ( {
9
+ onIntegrate,
10
+ } ) => {
11
+ const [ googleEnabled , setGoogleEnabled ] = React . useState ( false ) ;
12
+ const [ appleEnabled , setAppleEnabled ] = React . useState ( false ) ;
13
+
14
+ return (
15
+ < View style = { styles . container } >
16
+ < Text style = { styles . sectionTitle } > Calendar Integration</ Text >
17
+ < View style = { styles . integrationItem } >
18
+ < Image
19
+ source = { {
20
+ uri : 'https://www.gstatic.com/calendar/images/dynamiclogo_2020q4/calendar_31_2x.png' ,
21
+ } }
22
+ style = { styles . calendarIcon }
23
+ />
24
+ < Text style = { styles . integrationText } > Connect with Google Calendar</ Text >
25
+ < Switch
26
+ value = { googleEnabled }
27
+ onValueChange = { setGoogleEnabled }
28
+ trackColor = { { false : '#767577' , true : '#4285F4' } }
29
+ />
30
+ </ View >
23
31
< View style = { styles . integrationItem } >
24
- < Image
25
- source = { { uri : 'https://help.apple.com/assets/65D689DF13D1B1E17703916F/65D689E0D302CF88600FDD25/en_US/941b3852f089696217cabe420c7a459f.png' } }
32
+ < Image
33
+ source = { {
34
+ uri : 'https://help.apple.com/assets/65D689DF13D1B1E17703916F/65D689E0D302CF88600FDD25/en_US/941b3852f089696217cabe420c7a459f.png' ,
35
+ } }
26
36
style = { styles . calendarIcon }
27
37
/>
28
38
< Text style = { styles . integrationText } > Connect with Apple Calendar</ Text >
@@ -32,37 +42,40 @@ const CalendarIntegration = () => {
32
42
trackColor = { { false : '#767577' , true : '#007AFF' } }
33
43
/>
34
44
</ View >
35
- </ View >
36
- ) ;
45
+ { onIntegrate && (
46
+ < Button title = "Integrate Calendar" onPress = { onIntegrate } />
47
+ ) }
48
+ </ View >
49
+ ) ;
37
50
} ;
38
51
39
52
const styles = StyleSheet . create ( {
40
- container : {
41
- backgroundColor : '#F8F9FA' ,
42
- borderRadius : 12 ,
43
- marginHorizontal : 16 ,
44
- } ,
45
- sectionTitle : {
46
- fontSize : 16 ,
47
- fontWeight : '600' ,
48
- marginBottom : 8 ,
49
- color : '#333' ,
50
- } ,
51
- integrationItem : {
52
- flexDirection : 'row' ,
53
- alignItems : 'center' ,
54
- marginBottom : 8 ,
55
- } ,
56
- calendarIcon : {
57
- width : 28 ,
58
- height : 28 ,
59
- marginRight : 12 ,
60
- } ,
61
- integrationText : {
62
- flex : 1 ,
63
- fontSize : 15 ,
64
- color : '#333' ,
65
- } ,
53
+ container : {
54
+ backgroundColor : '#F8F9FA' ,
55
+ borderRadius : 12 ,
56
+ marginHorizontal : 16 ,
57
+ } ,
58
+ sectionTitle : {
59
+ fontSize : 16 ,
60
+ fontWeight : '600' ,
61
+ marginBottom : 8 ,
62
+ color : '#333' ,
63
+ } ,
64
+ integrationItem : {
65
+ flexDirection : 'row' ,
66
+ alignItems : 'center' ,
67
+ marginBottom : 8 ,
68
+ } ,
69
+ calendarIcon : {
70
+ width : 28 ,
71
+ height : 28 ,
72
+ marginRight : 12 ,
73
+ } ,
74
+ integrationText : {
75
+ flex : 1 ,
76
+ fontSize : 15 ,
77
+ color : '#333' ,
78
+ } ,
66
79
} ) ;
67
80
68
81
export default CalendarIntegration ;
0 commit comments