nurmuhammet/umra-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor FeatureCard component to include image and badge text props. Update HomeScreen to display a new FeatureCard with localized title and description, removing previous cards for a cleaner layout.

Browse Source
This commit is contained in:
Nurmuhammet Allanov
2025-08-17 22:26:10 +05:00
parent 68aa0cd6fa
commit 37aef1adc1
2 changed files with 17 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
app/(tabs)/home.tsx
View File

@@ -62,24 +62,12 @@ export default function HomeScreen() {
<ScrollView> <ScrollView>
<View style={styles.innerContainer}> <View style={styles.innerContainer}>
<FeatureCard <FeatureCard
isNew badgeText="07:00"
title={i18n.t('yourJourneyToHajj')} title="Aýşe metjidi"
description={i18n.t('hajjEssentials')} description="Oteldan ugraýar"
image={require('@/assets/images/splash-icon.png')}
/> />
<View style={styles.cardRow}>
<View style={{ flex: 1, marginRight: 10 }}>
<FeatureCard
title={i18n.t('umrah')}
description={i18n.t('bookPermit')}
/>
</View>
<View style={{ flex: 1, marginLeft: 10 }}>
<FeatureCard
title={i18n.t('nobleRawdah')}
description={i18n.t('bookPermit')}
/>
</View>
</View>
<PrayerTimeCard /> <PrayerTimeCard />
<ServicesGrid /> <ServicesGrid />
</View> </View>

19
components/FeatureCard.tsx
View File

@@ -1,23 +1,23 @@
import React from 'react'; import React from 'react';
import { View, Text, StyleSheet } from 'react-native'; import { View, Text, StyleSheet, Image, ImageSourcePropType } from 'react-native';
import Colors from '@/constants/Colors'; import Colors from '@/constants/Colors';
import { FontAwesome } from '@expo/vector-icons';
import i18n from '@/i18n'; import i18n from '@/i18n';
type FeatureCardProps = { type FeatureCardProps = {
title: string; title: string;
description: string; description: string;
isNew?: boolean; badgeText?: string;
image: ImageSourcePropType;
}; };
export default function FeatureCard({ title, description, isNew = false }: FeatureCardProps) { export default function FeatureCard({ title, description, badgeText, image }: FeatureCardProps) {
const colorScheme = 'dark'; // Assuming a dark theme const colorScheme = 'dark'; // Assuming a dark theme
return ( return (
<View style={[styles.container, { backgroundColor: Colors[colorScheme].secondary }]}> <View style={[styles.container, { backgroundColor: Colors[colorScheme].secondary }]}>
{isNew && ( {badgeText && (
<View style={styles.newBadge}> <View style={styles.newBadge}>
<Text style={styles.newText}>{i18n.t('newExperience')}</Text> <Text style={styles.newText}>{badgeText}</Text>
</View> </View>
)} )}
<View style={styles.content}> <View style={styles.content}>
@@ -25,7 +25,7 @@ export default function FeatureCard({ title, description, isNew = false }: Featu
<Text style={styles.title}>{title}</Text> <Text style={styles.title}>{title}</Text>
<Text style={styles.description}>{description}</Text> <Text style={styles.description}>{description}</Text>
</View> </View>
<FontAwesome name="plus-circle" size={24} color={Colors.dark.tint} /> <Image source={image} style={styles.image} resizeMode="cover" />
</View> </View>
</View> </View>
); );
@@ -65,4 +65,9 @@ const styles = StyleSheet.create({
color: Colors.dark.textSecondary, color: Colors.dark.textSecondary,
marginTop: 5, marginTop: 5,
}, },
image: {
width: 100,
height: 100,
borderRadius: 50,
}
}); });