Initial commit
This commit is contained in:
Samandar Turgunboyev
272
src/screens/home/cargoPrices/ui/CargoPrices.tsx
Normal file
272
src/screens/home/cargoPrices/ui/CargoPrices.tsx
Normal file
@@ -0,0 +1,272 @@
|
||||
import { useNavigation } from '@react-navigation/native';
|
||||
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
|
||||
import NavbarBack from 'components/NavbarBack';
|
||||
import Navigation from 'components/Navigation';
|
||||
import * as React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from 'react-native';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import Tabs from '../../home/ui/Tabs';
|
||||
|
||||
interface CargoPricesProps {}
|
||||
|
||||
const CargoPrices = (props: CargoPricesProps) => {
|
||||
const { t } = useTranslation();
|
||||
const [activeTab, setActiveTab] = React.useState<'avia' | 'auto'>('avia');
|
||||
const navigation = useNavigation<NativeStackNavigationProp<any>>();
|
||||
return (
|
||||
<SafeAreaView style={{ flex: 1 }}>
|
||||
<NavbarBack title={t('Kargo narxlari')} />
|
||||
<ScrollView style={{ flex: 1 }}>
|
||||
<View style={styles.container}>
|
||||
<Tabs activeTab={activeTab} setActiveTab={setActiveTab} />
|
||||
{activeTab === 'avia' && (
|
||||
<View style={{ marginTop: 20, gap: 10, marginBottom: 20 }}>
|
||||
<View style={styles.cardWhite}>
|
||||
<View style={styles.priceCard}>
|
||||
<Text style={styles.titleBlack}>
|
||||
{t('Oddiy maxsulotlar')}
|
||||
</Text>
|
||||
<Text style={[styles.titleBlack, { fontSize: 16 }]}>
|
||||
9.2$ /1kg
|
||||
</Text>
|
||||
</View>
|
||||
<Text style={styles.desc}>
|
||||
{t('(Katta miqdordagi yuklar kelishuv asosida)')}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.cardWhite}>
|
||||
<View style={styles.priceCard}>
|
||||
<Text style={styles.titleBlack}>{t('Brend buyumlar')}</Text>
|
||||
<Text style={[styles.titleBlack, { fontSize: 16 }]}>
|
||||
12.2$ /1kg
|
||||
</Text>
|
||||
</View>
|
||||
<Text style={styles.desc}>
|
||||
{t('(Karobka,dokumentlar bilan birga)')}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.cardWhite}>
|
||||
<View style={styles.priceCard}>
|
||||
<Text style={styles.titleBlack}>
|
||||
{t(
|
||||
'Avia pochtada bir maxsulotdan seriyalab olish mumkin emas',
|
||||
)}
|
||||
</Text>
|
||||
</View>
|
||||
<Text style={styles.desc}>
|
||||
{t(
|
||||
'(Bu kargo narxini o’sishiga olib keladi. Seriyali buyularni avto kargo orqali olib kelish arzonga tushadi)',
|
||||
)}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={[styles.cardWhite, { backgroundColor: '#DFF2FD' }]}>
|
||||
<View style={styles.priceCard}>
|
||||
<Text style={[styles.titleBlack, { color: '#28A7E8' }]}>
|
||||
{t('Yetib kelish vaqti')}
|
||||
</Text>
|
||||
<Text
|
||||
style={[
|
||||
styles.titleBlack,
|
||||
{ fontSize: 16, color: '#28A7E8' },
|
||||
]}
|
||||
>
|
||||
7-10 {t('kun')}
|
||||
</Text>
|
||||
</View>
|
||||
<Text style={[styles.desc, { color: '#28A7E8B2' }]}>
|
||||
{t(
|
||||
'Yuklarni yetib elish vaqti oxirgi qadoqlash kunidan boshlab xisoblanadi',
|
||||
)}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.cardWhite}>
|
||||
<View style={styles.priceCard}>
|
||||
<Text style={styles.titleBlack}>
|
||||
{t('Minimal miqdor talab qilinmaydi.')}
|
||||
</Text>
|
||||
</View>
|
||||
<Text style={styles.desc}>
|
||||
{t(
|
||||
"ya'ni, qancha gramm mahsulot olsangiz, shuncha og'irligi (gramm) uchun to'lov qilasiz.",
|
||||
)}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={[styles.card]}>
|
||||
<Text style={[styles.titleBlack, { color: '#FF6363' }]}>
|
||||
{t('Muhim!')}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={[styles.cardWhite, { backgroundColor: '#DFF2FD' }]}>
|
||||
<View style={styles.priceCard}>
|
||||
<Text style={[styles.titleBlack, { color: '#28A7E8' }]}>
|
||||
{t('Filiallargacha yetkazib berish - bepul.')}
|
||||
</Text>
|
||||
</View>
|
||||
<Text style={[styles.desc, { color: '#000000' }]}>
|
||||
{t('Batafsil')}: @CPcargo_admin
|
||||
</Text>
|
||||
</View>
|
||||
<View style={[styles.card]}>
|
||||
<Text style={[styles.titleBlack, { color: '#000000B2' }]}>
|
||||
{t(
|
||||
"Agar siz yashayotgan hududda bizning filialimiz mavjud bo'lmasa, o'zingizga eng yaqin bo'lgan filialni tanlab, ro'yhatdan o'tishingiz mumkin.",
|
||||
)}
|
||||
</Text>
|
||||
</View>
|
||||
<TouchableOpacity
|
||||
style={[styles.card]}
|
||||
onPress={() => navigation.navigate('ListBranches')}
|
||||
>
|
||||
<Text style={[styles.titleBlack, { color: '#28A7E8' }]}>
|
||||
{t("Filiallarimiz ro'yhati ilovada mavjud")}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
)}
|
||||
{activeTab === 'auto' && (
|
||||
<View style={{ marginTop: 20, gap: 10, marginBottom: 20 }}>
|
||||
<View style={styles.cardWhite}>
|
||||
<View style={styles.priceCard}>
|
||||
<Text style={styles.titleBlack}>0-30 kg</Text>
|
||||
<Text style={[styles.titleBlack, { fontSize: 16 }]}>
|
||||
7$ /1kg
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.cardWhite}>
|
||||
<View style={styles.priceCard}>
|
||||
<Text style={styles.titleBlack}>30-100kg</Text>
|
||||
<Text style={[styles.titleBlack, { fontSize: 16 }]}>
|
||||
6.5$ /1kg
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.cardWhite}>
|
||||
<View style={styles.priceCard}>
|
||||
<Text style={styles.titleBlack}>
|
||||
100kg {t('dan boshlab')}
|
||||
</Text>
|
||||
<Text style={[styles.titleBlack, { fontSize: 16 }]}>
|
||||
6$ /1kg
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.cardWhite}>
|
||||
<Text style={styles.desc}>
|
||||
{t(
|
||||
'Avto kargoda bir maxsulotdan seriyalab istalgan katta miqdorda olish mumkin. Doimiyko’p yuk oluvchi ijozlar uchun maxsus arzonlashtrilgan narxlarimiz bor',
|
||||
)}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={[styles.cardWhite, { backgroundColor: '#DFF2FD' }]}>
|
||||
<View style={styles.priceCard}>
|
||||
<Text style={[styles.titleBlack, { color: '#28A7E8' }]}>
|
||||
{t('Yetib kelish vaqti')}
|
||||
</Text>
|
||||
<Text
|
||||
style={[
|
||||
styles.titleBlack,
|
||||
{ fontSize: 16, color: '#28A7E8' },
|
||||
]}
|
||||
>
|
||||
10-20 {t('kun')}
|
||||
</Text>
|
||||
</View>
|
||||
<Text style={[styles.desc, { color: '#28A7E8B2' }]}>
|
||||
{t(
|
||||
'Yuklarni yetib elish vaqti oxirgi qadoqlash kunidan boshlab xisoblanadi',
|
||||
)}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.cardWhite}>
|
||||
<View style={styles.priceCard}>
|
||||
<Text style={styles.titleBlack}>
|
||||
{t('Minimal miqdor talab qilinmaydi.')}
|
||||
</Text>
|
||||
</View>
|
||||
<Text style={styles.desc}>
|
||||
{t(
|
||||
"ya'ni, qancha gramm mahsulot olsangiz, shuncha og'irligi (gramm) uchun to'lov qilasiz.",
|
||||
)}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={[styles.card]}>
|
||||
<Text style={[styles.titleBlack, { color: '#FF6363' }]}>
|
||||
{t('Muhim!')}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={[styles.cardWhite, { backgroundColor: '#DFF2FD' }]}>
|
||||
<View style={styles.priceCard}>
|
||||
<Text style={[styles.titleBlack, { color: '#28A7E8' }]}>
|
||||
{t('Filiallargacha yetkazib berish - bepul.')}
|
||||
</Text>
|
||||
</View>
|
||||
<Text style={[styles.desc, { color: '#000000' }]}>
|
||||
{t('Batafsil')}: @CPcargo_admin
|
||||
</Text>
|
||||
</View>
|
||||
<View style={[styles.card]}>
|
||||
<Text style={[styles.titleBlack, { color: '#000000B2' }]}>
|
||||
{t(
|
||||
"Agar siz yashayotgan hududda bizning filialimiz mavjud bo'lmasa, o'zingizga eng yaqin bo'lgan filialni tanlab, ro'yhatdan o'tishingiz mumkin.",
|
||||
)}
|
||||
</Text>
|
||||
</View>
|
||||
<TouchableOpacity
|
||||
style={[styles.card]}
|
||||
onPress={() => navigation.navigate('ListBranches')}
|
||||
>
|
||||
<Text style={[styles.titleBlack, { color: '#28A7E8' }]}>
|
||||
{t("Filiallarimiz ro'yhati ilovada mavjud")}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</ScrollView>
|
||||
<Navigation />
|
||||
</SafeAreaView>
|
||||
);
|
||||
};
|
||||
|
||||
export default CargoPrices;
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
marginTop: 20,
|
||||
},
|
||||
card: {
|
||||
width: '95%',
|
||||
gap: 5,
|
||||
margin: 'auto',
|
||||
},
|
||||
cardWhite: {
|
||||
backgroundColor: '#FFFFFF',
|
||||
width: '95%',
|
||||
gap: 5,
|
||||
margin: 'auto',
|
||||
padding: 10,
|
||||
borderRadius: 8,
|
||||
},
|
||||
titleBlack: {
|
||||
fontSize: 16,
|
||||
fontWeight: '500',
|
||||
},
|
||||
desc: {
|
||||
color: '#000000B2',
|
||||
fontSize: 14,
|
||||
fontWeight: '400',
|
||||
},
|
||||
priceCard: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user