Nurmuhammet Allanov
f519052b7b
- Added new dependencies: expo-file-system and expo-sharing. - Updated package versions for @babel/core and react-dom. - Introduced a new index screen for displaying prayer times with city selection. - Refactored ServicesGrid to accept a dynamic services array and improved layout. - Updated localization for new phrases and service titles in Turkmen. - Enhanced LostKeyModal with a close button and additional text. - Improved PhrasebookModal to allow expandable phrases for better user interaction.
73 lines
1.8 KiB
TypeScript
73 lines
1.8 KiB
TypeScript
import React from 'react';
|
|
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
|
|
import Colors from '@/constants/Colors';
|
|
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
|
|
import { router } from 'expo-router';
|
|
import i18n from '@/i18n';
|
|
|
|
type ServicesGridProps = {
|
|
services: {
|
|
name: string;
|
|
icon: any;
|
|
}[];
|
|
};
|
|
const ServicesGrid = ({ services }: ServicesGridProps) => {
|
|
const handlePress = (name: string) => {
|
|
if (name === 'quran') {
|
|
|
|
}
|
|
};
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<Text style={styles.title}>{i18n.t('servicesToEnrich')}</Text>
|
|
<View style={styles.grid}>
|
|
{services.map((service) => (
|
|
<TouchableOpacity
|
|
key={service.name}
|
|
style={styles.serviceItem}
|
|
onPress={() => handlePress(service.name)}>
|
|
<View style={[styles.iconContainer, { backgroundColor: Colors['dark'].secondary }]}>
|
|
<MaterialCommunityIcons name={service.icon} size={30} color={Colors['dark'].tint} />
|
|
</View>
|
|
<Text style={styles.serviceName}>{i18n.t(service.name)}</Text>
|
|
</TouchableOpacity>
|
|
))}
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
marginVertical: 20,
|
|
},
|
|
title: {
|
|
fontSize: 18,
|
|
fontWeight: 'bold',
|
|
color: 'white',
|
|
marginBottom: 10,
|
|
},
|
|
grid: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-around',
|
|
},
|
|
serviceItem: {
|
|
alignItems: 'center',
|
|
},
|
|
iconContainer: {
|
|
width: 60,
|
|
height: 60,
|
|
borderRadius: 30,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
marginBottom: 5,
|
|
},
|
|
serviceName: {
|
|
color: 'white',
|
|
textAlign: 'center',
|
|
},
|
|
});
|
|
|
|
export default ServicesGrid;
|