fitst commit

screens/create-ads/ui/StepFour.tsx

@@ -0,0 +1,73 @@
+import { useTheme } from '@/components/ThemeContext';
+import React, { Dispatch, forwardRef, SetStateAction } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ScrollView, StyleSheet, Text, View } from 'react-native';
+import { CreateAdsResponse } from '../lib/types';
+
+type StepFourProps = {
+  setPayment: Dispatch<SetStateAction<'PAYME' | 'REFFERAL'>>;
+  data: CreateAdsResponse | null;
+};
+
+const StepFour = forwardRef(({ data }: StepFourProps) => {
+  const { isDark } = useTheme();
+  const { t } = useTranslation();
+
+  const theme = {
+    background: isDark ? '#0f172a' : '#ffffff',
+    cardBg: isDark ? '#1e293b' : '#f8fafc',
+    cardBorder: isDark ? '#334155' : '#e2e8f0',
+    text: isDark ? '#f8fafc' : '#0f172a',
+    textSecondary: isDark ? '#cbd5e1' : '#64748b',
+    totalPrice: isDark ? '#f87171' : '#ef4444',
+  };
+
+  const totalPrice = data?.data.total_price || 0;
+
+  return (
+    <>
+      <ScrollView
+        contentContainerStyle={[styles.container, { backgroundColor: theme.background }]}
+        showsVerticalScrollIndicator={false}
+      >
+        <Text style={[styles.sectionTitle, { color: theme.text }]}>
+          {t("To'lov uchun ma'lumotlar")}
+        </Text>
+
+        <View
+          style={[styles.card, { backgroundColor: theme.cardBg, borderColor: theme.cardBorder }]}
+        >
+          <Text style={[styles.label, { color: theme.text }]}>
+            {t("E'lon nomi")}: <Text style={styles.value}>{data?.data.title}</Text>
+          </Text>
+          <Text style={[styles.label, { color: theme.text }]}>
+            {t("E'lon tavsifi")}: <Text style={styles.value}>{data?.data.description}</Text>
+          </Text>
+          <Text style={[styles.label, styles.total, { color: theme.totalPrice }]}>
+            {t('Umumiy narx')}:{' '}
+            <Text style={styles.value}>
+              {totalPrice} {t("so'm")}
+            </Text>
+          </Text>
+        </View>
+      </ScrollView>
+    </>
+  );
+});
+
+export default StepFour;
+
+const styles = StyleSheet.create({
+  container: { flexGrow: 1 },
+  sectionTitle: { fontSize: 18, fontWeight: '700', marginVertical: 12 },
+  card: {
+    borderRadius: 16,
+    padding: 20,
+    marginBottom: 20,
+    borderWidth: 1,
+    gap: 8,
+  },
+  label: { fontSize: 15, fontWeight: '600' },
+  value: { fontWeight: '800' },
+  total: { marginTop: 8, fontSize: 16 },
+});