92 lines
2.6 KiB
TypeScript
92 lines
2.6 KiB
TypeScript
import React from 'react';
|
|
import { View, Text, StyleSheet, ImageBackground } from 'react-native';
|
|
import Colors from '@/constants/Colors';
|
|
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
|
|
|
|
const prayerTimes = [
|
|
{ name: 'Al-fajr', time: '04:48 AM', icon: 'weather-sunset-up' },
|
|
{ name: 'Sunrise', time: '06:20 AM', icon: 'weather-sunny' },
|
|
{ name: 'Dhohr', time: '01:06 PM', icon: 'weather-partly-cloudy' },
|
|
{ name: 'Asr', time: '04:50 PM', icon: 'weather-cloudy' },
|
|
{ name: 'Maghreb', time: '07:51 PM', icon: 'weather-sunset-down' },
|
|
{ name: 'Isha', time: '09:02 PM', icon: 'weather-night' },
|
|
];
|
|
|
|
export default function PrayerTimeCard() {
|
|
const colorScheme = 'dark';
|
|
|
|
return (
|
|
<ImageBackground
|
|
source={{ uri: 'https://i.imgur.com/your-image.jpg' }} // Replace with a real image URL
|
|
style={styles.container}
|
|
imageStyle={{ borderRadius: 15 }}
|
|
>
|
|
<View style={styles.overlay}>
|
|
<View style={styles.header}>
|
|
<MaterialCommunityIcons name="refresh" size={16} color={Colors.dark.text} />
|
|
<Text style={styles.location}>Mashhad, Iran</Text>
|
|
</View>
|
|
<Text style={styles.remainingTimeLabel}>Left on Maghreb prayer</Text>
|
|
<Text style={styles.remainingTime}>49:44</Text>
|
|
<View style={styles.prayerTimesContainer}>
|
|
{prayerTimes.map((prayer, index) => (
|
|
<View key={index} style={styles.prayerTimeItem}>
|
|
<MaterialCommunityIcons name={prayer.icon} size={24} color={Colors.dark.text} />
|
|
<Text style={styles.prayerName}>{prayer.name}</Text>
|
|
<Text style={styles.prayerTime}>{prayer.time}</Text>
|
|
</View>
|
|
))}
|
|
</View>
|
|
</View>
|
|
</ImageBackground>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
marginVertical: 20,
|
|
borderRadius: 15,
|
|
},
|
|
overlay: {
|
|
backgroundColor: 'rgba(0,0,0,0.5)',
|
|
borderRadius: 15,
|
|
padding: 20,
|
|
},
|
|
header: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
marginBottom: 20,
|
|
},
|
|
location: {
|
|
color: Colors.dark.text,
|
|
marginLeft: 10,
|
|
},
|
|
remainingTimeLabel: {
|
|
color: Colors.dark.textSecondary,
|
|
textAlign: 'center',
|
|
},
|
|
remainingTime: {
|
|
color: Colors.dark.text,
|
|
fontSize: 48,
|
|
fontWeight: 'bold',
|
|
textAlign: 'center',
|
|
marginVertical: 10,
|
|
},
|
|
prayerTimesContainer: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-around',
|
|
marginTop: 20,
|
|
},
|
|
prayerTimeItem: {
|
|
alignItems: 'center',
|
|
},
|
|
prayerName: {
|
|
color: Colors.dark.text,
|
|
marginTop: 5,
|
|
},
|
|
prayerTime: {
|
|
color: Colors.dark.textSecondary,
|
|
fontSize: 12,
|
|
},
|
|
});
|