From f796f832a8ac7983bee7873e0a4f09c746a41382 Mon Sep 17 00:00:00 2001
From: Nurmuhammet Allanov <nurmuhammet@mail.com>
Date: Wed, 20 Aug 2025 18:43:05 +0500
Subject: [PATCH] Refactor ServicesScreen to use a dynamic services array and
 improve layout

- Introduced a services array to dynamically render service cards with localized titles and icons.
- Updated layout styles for a grid display of service cards, enhancing visual organization.
- Added new localization keys for services in English, Russian, and Turkmen.
---
 app/(tabs)/services.tsx    | 47 ++++++++++++++++++++++++++------------
 components/ServiceCard.tsx |  4 ++--
 locales/en.json            |  9 +++++---
 locales/ru.json            |  9 +++++---
 locales/tk.json            | 10 ++++----
 5 files changed, 52 insertions(+), 27 deletions(-)

diff --git a/app/(tabs)/services.tsx b/app/(tabs)/services.tsx
index 9c59ec2..2d2d14d 100644
--- a/app/(tabs)/services.tsx
+++ b/app/(tabs)/services.tsx
@@ -1,4 +1,4 @@
-import { StyleSheet, SafeAreaView, View, TouchableOpacity } from 'react-native';
+import { StyleSheet, SafeAreaView, View, TouchableOpacity, Dimensions } from 'react-native';
 import { Text } from '@/components/Themed';
 import i18n from '@/i18n';
 import { FontAwesome5 } from '@expo/vector-icons';
@@ -9,18 +9,36 @@ import CurrencyConverterModal from '@/components/CurrencyConverterModal';
 export default function ServicesScreen() {
   const [modalVisible, setModalVisible] = useState(false);
 
+  const services = [
+    {
+      title: 'currencyConverter',
+      icon: <FontAwesome5 name="dollar-sign" size={24} color="#D4AF37" />,
+      onPress: () => setModalVisible(true),
+    },
+    {
+      title: 'hotelCard',
+      icon: <FontAwesome5 name="hotel" size={24} color="#D4AF37" />,
+    },
+    {
+      title: 'lostKey',
+      icon: <FontAwesome5 name="key" size={24} color="#D4AF37" />,
+    },
+    {
+      title: 'translator',
+      icon: <FontAwesome5 name="language" size={24} color="#D4AF37" />,
+    },
+  ];
+
   return (
     <SafeAreaView style={styles.container}>
       <Text style={styles.title}>{i18n.t('services')}</Text>
 
-      <View style={styles.row}>
-        <TouchableOpacity onPress={() => setModalVisible(true)}>
-          <ServiceCard title="Real Manat hasaplama" icon={<FontAwesome5 name="dollar-sign" size={24} color="#D4AF37" />} />
-        </TouchableOpacity>
-
-        <ServiceCard title="Oteliň wizitkasy" icon={<FontAwesome5 name="hotel" size={24} color="#D4AF37" />} />
-        <ServiceCard title="Oteliň açary içinde galsa" icon={<FontAwesome5 name="key" size={24} color="#D4AF37" />} />
-        <ServiceCard title="Terjimeçi" icon={<FontAwesome5 name="language" size={24} color="#D4AF37" />} />
+      <View style={styles.grid}>
+        {services.map((service, index) => (
+          <TouchableOpacity key={index} style={styles.cardContainer} onPress={service.onPress}>
+            <ServiceCard title={i18n.t(service.title)} icon={service.icon} />
+          </TouchableOpacity>
+        ))}
       </View>
       <CurrencyConverterModal
         visible={modalVisible}
@@ -33,7 +51,6 @@ export default function ServicesScreen() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    paddingHorizontal: 15,
   },
   title: {
     fontSize: 22,
@@ -41,11 +58,13 @@ const styles = StyleSheet.create({
     marginVertical: 15,
     marginLeft: 15,
   },
-  row: {
-    flex: 1,
-    justifyContent: 'space-around',
+  grid: {
     flexDirection: 'row',
     flexWrap: 'wrap',
-    rowGap: 0,
+    marginLeft: 15,
+  },
+  cardContainer: {
+    width: '50%',
+    marginBottom: 15,
   },
 });
diff --git a/components/ServiceCard.tsx b/components/ServiceCard.tsx
index 91a678b..877e126 100644
--- a/components/ServiceCard.tsx
+++ b/components/ServiceCard.tsx
@@ -25,14 +25,14 @@ const styles = StyleSheet.create({
     borderRadius: 15,
     padding: 15,
     marginVertical: 10,
-    width: '45%',
-    aspectRatio: 1,
     justifyContent: 'center',
     alignItems: 'center',
+    aspectRatio: 1,
   },
   content: {
     justifyContent: 'center',
     alignItems: 'center',
+    flex: 1,
   },
   iconContainer: {
     marginBottom: 10,
diff --git a/locales/en.json b/locales/en.json
index f2d1986..ea5164f 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -14,7 +14,11 @@
   "servicesToEnrich": "Services to Enrich Your Spiritual Experience",
   "quran": "Qur'an",
   "hadith": "Hadith",
-  "dua": "Du'a",
+  "dua": "Dua",
+  "currencyConverter": "Currency Converter",
+  "hotelCard": "Hotel Card",
+  "lostKey": "Lost Key?",
+  "translator": "Translator",
   "adhkar": "Adhkar",
   "hisnAlMuslim": "Hisn Al-Muslim",
   "morningEveningThikr": "Thikr said in the morning and evening",
@@ -27,6 +31,5 @@
   "sneezingSupplication": "Supplication upon sneezing",
   "sarToTmt": "SAR to TMT",
   "hotelBusinessCard": "Hotel Business Card",
-  "masterkeyBox": "Masterkey Box",
-  "translator": "Translator"
+  "masterkeyBox": "Masterkey Box"
 }
diff --git a/locales/ru.json b/locales/ru.json
index de139c8..d22ede8 100644
--- a/locales/ru.json
+++ b/locales/ru.json
@@ -12,8 +12,12 @@
   "leftOnPrayer": "Осталось до молитвы {{prayerName}}",
   "servicesToEnrich": "Услуги для обогащения вашего духовного опыта",
   "quran": "Коран",
-  "hadith": "Хадисы",
+  "hadith": "Хадис",
   "dua": "Дуа",
+  "currencyConverter": "Конвертер валют",
+  "hotelCard": "Карта отеля",
+  "lostKey": "Потеряли ключ?",
+  "translator": "Переводчик",
   "adhkar": "Азкар",
   "hisnAlMuslim": "Крепость мусульманина",
   "morningEveningThikr": "Зикр, читаемый утром и вечером",
@@ -26,6 +30,5 @@
   "sneezingSupplication": "Мольба при чихании",
   "sarToTmt": "SAR в TMT",
   "hotelBusinessCard": "Визитная карточка отеля",
-  "masterkeyBox": "Ящик для мастер-ключей",
-  "translator": "Переводчик"
+  "masterkeyBox": "Ящик для мастер-ключей"
 }
diff --git a/locales/tk.json b/locales/tk.json
index c97027b..81044b2 100644
--- a/locales/tk.json
+++ b/locales/tk.json
@@ -15,6 +15,10 @@
   "quran": "Kuran",
   "hadith": "Hadys",
   "dua": "Doga",
+  "currencyConverter": "Walýuta hasaplaýjy",
+  "hotelCard": "Myhmanhana kartasy",
+  "lostKey": "Açaryňyzy ýitirdiňizmi?",
+  "translator": "Terjimeçi",
   "adhkar": "Zikir",
   "hisnAlMuslim": "Musulmanyň goragy",
   "Makkah": "Mekke",
@@ -34,9 +38,5 @@
   "insultedWhileFasting": "Orazaly wagtyň kemsidilende",
   "seeingFruitSupplication": "Irki ýa-da bişmedik miwäni göreniňde aýdylýan doga",
   "sneezingSupplication": "Asgyranyňda aýdylýan doga",
-  "sarToTmt": "SAR-dan TMT-a",
-  "hotelBusinessCard": "Myhmanhananyň wizit karty",
-  "masterkeyBox": "Masterkey gutusy",
-  "translator": "Terjimeçi",
-  "currencyConverter": "Walýuta hasaplama"
+  "sarToTmt": "SAR-dan TMT-a"
 }