react_native/donutshop/app/components/HomeCardItem.tsx

59 lines
No EOL
3.3 KiB
TypeScript

import { StyleSheet, Text, View, Pressable, Image} from 'react-native'
import React from 'react'
import { useNavigation } from '@react-navigation/native';
const HomeCardItem = () => {
const navigation = useNavigation();
return (
<View style={{padding: 5}}>
<View style={{shadowColor: '#B4B4B8', shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.5, shadowRadius: 1,}}>
<Pressable>
<View style={{borderColor: '#EEEEEE', borderWidth: 1, borderRadius: 5}}>
<Image source={require('../../assets/images/menu/coming_soon.png')} style={{width: '100%', height: 200, borderTopLeftRadius: 5, borderTopRightRadius: 5}}/>
<View style={{padding: 10}}>
<Text style={{fontSize: 16, fontWeight: 600, letterSpacing: 0.5, marginBottom: 10}}>Pokémon Donuts<Text style={{fontSize: 12, color: '#DA7297'}}>(Coming soon)</Text></Text>
<Text>The limited-edition Pokémon Donuts is coming soon!</Text>
</View>
</View>
</Pressable>
</View>
<View style={{marginTop: 10, shadowColor: '#B4B4B8', shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.5, shadowRadius: 1,}}>
<Pressable onPress={() => navigation.navigate('menu')}>
<View style={{borderColor: '#EEEEEE', borderWidth: 1, borderRadius: 5}}>
<Image source={require('../../assets/images/menu/new_special.jpg')} style={{width: '100%', height: 200, borderTopLeftRadius: 5, borderTopRightRadius: 5}}/>
<View style={{padding: 10}}>
<Text style={{fontSize: 16, fontWeight: 600, letterSpacing: 0.5, marginBottom: 10}}>Mothers Day Box for your mama</Text>
<Text>Lets show our appreciation for our moms by treating them with the special Mothers Day Box!</Text>
<Pressable onPress={() => navigation.navigate('menu')} style={{marginTop: 10, padding: 10, backgroundColor: '#DA7297', width: 100, borderRadius: 5, alignItems: 'center'}}>
<Text style={{color: 'white', fontWeight: 500}}>Order Now</Text>
</Pressable>
</View>
</View>
</Pressable>
</View>
<View style={{marginTop: 10, shadowColor: '#B4B4B8', shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.5, shadowRadius: 1,}}>
<Pressable onPress={() => navigation.navigate('menu')}>
<View style={{borderColor: '#EEEEEE', borderWidth: 1, borderRadius: 5}}>
<Image source={require('../../assets/images/menu/new_drink.jpg')} style={{width: '100%', height: 200, borderTopLeftRadius: 5, borderTopRightRadius: 5}}/>
<View style={{padding: 10}}>
<Text style={{fontSize: 16, fontWeight: 600, letterSpacing: 0.5, marginBottom: 10}}>Colorful Smoothies are here</Text>
<Text>The colors are not due to artificial colorings, but rather from natural fruits and vegetables</Text>
<Pressable onPress={() => navigation.navigate('menu')} style={{marginTop: 10, padding: 10, backgroundColor: '#DA7297', width: 100, borderRadius: 5, alignItems: 'center'}}>
<Text style={{color: 'white', fontWeight: 500}}>Order Now</Text>
</Pressable>
</View>
</View>
</Pressable>
</View>
</View>
)
}
export default HomeCardItem
const styles = StyleSheet.create({})