Commit b2034fff authored by Devin B's avatar Devin B

Add_info_feature

parent 65e31de5
...@@ -64,6 +64,22 @@ const Additionalinformation = ({ navigation }) => { ...@@ -64,6 +64,22 @@ const Additionalinformation = ({ navigation }) => {
} }
}; };
const ContactCard = ({ name, title, phone, email }) => (
<View style={styles.contactCard}>
<Text style={styles.contactName}>{name}</Text>
<Text style={styles.contactTitle}>{title}</Text>
<View style={styles.contactSpace} />
<TouchableOpacity onPress={() => Linking.openURL(`tel:${phone}`)}>
<Image source={require('./skinassets/calling.png')} style={styles.contactIcon} />
<Text style={styles.contactInfo}>Phone: {phone}</Text>
</TouchableOpacity>
<Image source={require('./skinassets/email.png')} style={styles.contactIcon} />
<TouchableOpacity onPress={() => Linking.openURL(`mailto:${email}`)}>
<Text style={styles.contactInfo}>Email: {email}</Text>
</TouchableOpacity>
</View>
);
const togglePlayPause = () => { const togglePlayPause = () => {
setVideoPaused(!videoPaused); setVideoPaused(!videoPaused);
showControlsTemporarily(); // Toggle the pause state of the video showControlsTemporarily(); // Toggle the pause state of the video
...@@ -121,13 +137,13 @@ const Additionalinformation = ({ navigation }) => { ...@@ -121,13 +137,13 @@ const Additionalinformation = ({ navigation }) => {
<View style={styles.qrCodeBox}> <View style={styles.qrCodeBox}>
<Image <Image
source={require('./skinassets/Vectorw.jpg')} // Make sure the path is correct source={require('./skinassets/vector2.png')} // Make sure the path is correct
style={styles.qrCodeImage} style={styles.qrCodeImage}
/> />
<Text style={styles.dscriptionText}> <Text style={styles.dscriptionText}>
Click below to explore informative videos on this condition from trusted YouTube sources. Click below to explore informative videos on this condition from trusted YouTube sources.
Remember, these videos are for educational purposes only. If you came this far, Remember, these videos are for educational purposes only. If you came this far,
you medical advice immediately consult a professional. Thank you for prioritizing your health. you need medical advice immediately consult a professional. Thank you for prioritizing your health.
</Text> </Text>
<TouchableOpacity <TouchableOpacity
...@@ -149,6 +165,32 @@ const Additionalinformation = ({ navigation }) => { ...@@ -149,6 +165,32 @@ const Additionalinformation = ({ navigation }) => {
<Text style={styles.orButtonText}>Click here to view video</Text> <Text style={styles.orButtonText}>Click here to view video</Text>
</TouchableOpacity> </TouchableOpacity>
</View>
<View style={styles.qrCodeBox}>
<Image
source={require('./skinassets/Vectorw.png')} // Make sure the path is correct
style={styles.qrCodeImage1}
/>
<Text style={styles.dscriptionText}>
වැඩිදුර මග පෙන්වීම සහ සහාය සඳහා කරුණාකර යෙදුමේ ලැයිස්තුගත කර ඇති චර්ම රෝග විශේෂඥයින් වෙත සම්බන්ධ වන්න.
</Text>
<Text style={styles.dscriptionText}>
Please reach out to the dermatologists listed in the app for further guidance and assistance.
</Text>
<ContactCard
name="Neville Bassnayake"
title="Dermatologist"
phone="+94 759509725"
email="Nevillebassn@gmail.com"
/>
<ContactCard
name="Sandhya Hemamali"
title="Dermatologist"
phone="+94 773910789"
email="Sandhyahe@gmail.com"
/>
</View> </View>
</View> </View>
...@@ -300,24 +342,35 @@ const styles = StyleSheet.create({ ...@@ -300,24 +342,35 @@ const styles = StyleSheet.create({
marginTop:50 marginTop:50
}, },
qrCodeImage: { qrCodeImage: {
width: 200, // Adjust size as needed width: 250, // Adjust size as needed
height: 200, // Adjust size as needed height: 200, // Adjust size as needed
}, },
qrCodeImage1:{
width: 200, // Adjust size as needed
height: 200,
},
orButton: { orButton: {
marginTop: 30, marginTop: 30,
backgroundColor:'#5F939A', backgroundColor:'#5F939A',
padding: 10, padding: 10,
borderRadius: 5, borderRadius: 10,
alignItems: 'center', alignItems: 'center',
justifyContent: 'left', justifyContent: 'left',
flexDirection: 'row', // Align icon and text in a row flexDirection: 'row', // Align icon and text in a row
width: '100%', // Make the button wider width: '100%', // Make the button wider
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 6,
},
shadowOpacity: 0.20,
shadowRadius: 4.65,
elevation: 12,
}, },
orButtonText: { orButtonText: {
color: COLORS.white, color: COLORS.white,
fontSize: 16, fontSize: 16,
fontWeight: 'bold',
marginLeft: 10, // Give some space after the icon marginLeft: 10, // Give some space after the icon
}, },
buttonIcon: { buttonIcon: {
...@@ -332,10 +385,47 @@ const styles = StyleSheet.create({ ...@@ -332,10 +385,47 @@ const styles = StyleSheet.create({
marginTop: 20, marginTop: 20,
marginBottom: 20, marginBottom: 20,
}, },
contactCard: {
backgroundColor: '#5F939A',
padding: 15,
borderRadius:20,
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 4,
},
shadowOpacity: 0.30,
shadowRadius: 4.65,
elevation: 8,
width: '110%',
marginVertical: 10,
alignItems: 'left',
},
contactName: {
fontSize: 18,
fontWeight: 'bold',
color: COLORS.white,
},
contactTitle: {
fontSize: 16,
color: COLORS.white,
},
contactInfo: {
fontSize: 14,
color: COLORS.white,
},
contactSpace: {
height: 10, // Space between title and contact info
},
contactIcon: {
width: 16,
height: 16,
marginRight: 8,
},
// ... possibly other styles // ... possibly other styles
}); });
export default Additionalinformation; export default Additionalinformation;
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment