fitst commit

screens/create-ads/ui/StepTwo.tsx

@@ -0,0 +1,143 @@
+import { useTheme } from '@/components/ThemeContext';
+import CategorySelection from '@/components/ui/IndustrySelection';
+import { XIcon } from 'lucide-react-native';
+import React, { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { FlatList, StyleSheet, Text, ToastAndroid, TouchableOpacity, View } from 'react-native';
+
+type StepProps = {
+  formData: any;
+  updateForm: (key: string, value: any) => void;
+};
+
+const StepTwo = forwardRef(({ formData, updateForm }: StepProps, ref) => {
+  const [selectedCategories, setSelectedCategories] = useState<any[]>(formData.category || []);
+  const [error, setError] = useState<string | null>(null);
+  const { isDark } = useTheme();
+  const { t } = useTranslation();
+
+  const theme = {
+    text: isDark ? '#f8fafc' : '#0f172a',
+    tabBg: isDark ? '#1e293b' : '#f1f5f9',
+    tabText: isDark ? '#ffffff' : '#1e293b',
+    deleteBg: isDark ? '#394e73' : '#cbd5e1',
+    deleteIcon: isDark ? '#f8fafc' : '#475569',
+    error: '#ef4444',
+    shadow: isDark ? '#000' : '#64748b',
+  };
+
+  // FormData-ni yangilash
+  useEffect(() => {
+    updateForm('category', selectedCategories);
+    if (selectedCategories.length > 0) setError(null);
+  }, [selectedCategories]);
+
+  // Validatsiya
+  const validate = () => {
+    if (selectedCategories.length === 0) {
+      setError('Iltimos, kompaniyalarni tanlang');
+      ToastAndroid.show(t('Iltimos, kompaniyalarni tanlang'), ToastAndroid.TOP);
+      return false;
+    }
+    return true;
+  };
+
+  useImperativeHandle(ref, () => ({
+    validate,
+  }));
+
+  // O'chirish funksiyasi
+  const removeCategory = (id: string | number) => {
+    setSelectedCategories((prev) => prev.filter((c) => c.id !== id));
+  };
+
+  // SearchTabs uchun render funksiyasi
+  const renderTab = ({ item }: { item: any }) => (
+    <View style={[styles.tabWrapper, { backgroundColor: theme.tabBg, shadowColor: theme.shadow }]}>
+      <Text
+        style={[styles.tabText, { color: theme.tabText }]}
+        numberOfLines={1}
+        ellipsizeMode="tail"
+      >
+        {item.name}
+      </Text>
+      <TouchableOpacity
+        onPress={() => removeCategory(item.id)}
+        style={[styles.deleteTab, { backgroundColor: theme.deleteBg }]}
+      >
+        <XIcon size={15} color={theme.deleteIcon} />
+      </TouchableOpacity>
+    </View>
+  );
+
+  return (
+    <View style={[styles.container]}>
+      {/* Tanlangan kategoriya tablari */}
+      {selectedCategories.length > 0 && (
+        <>
+          <Text style={[styles.label, { color: theme.text }]}>{t('Tanlangan sohalar')}:</Text>
+          <FlatList
+            data={selectedCategories}
+            renderItem={renderTab}
+            keyExtractor={(item) => item.id.toString()}
+            horizontal
+            showsHorizontalScrollIndicator={false}
+            contentContainerStyle={styles.tabsContainer}
+            ItemSeparatorComponent={() => <View style={{ width: 8 }} />}
+          />
+        </>
+      )}
+
+      {/* Kategoriya tanlash */}
+      <Text style={[styles.label, { color: theme.text }]}>{t("Sohalar ro'yxati")}:</Text>
+      <CategorySelection
+        selectedCategories={selectedCategories}
+        setSelectedCategories={setSelectedCategories}
+      />
+    </View>
+  );
+});
+
+export default StepTwo;
+
+const styles = StyleSheet.create({
+  container: { flexGrow: 1 },
+  label: {
+    fontSize: 16,
+    marginBottom: 5,
+    fontWeight: '600',
+  },
+  error: {
+    marginTop: 10,
+    fontWeight: '600',
+    fontSize: 14,
+  },
+  tabsContainer: {
+    marginBottom: 16,
+    paddingVertical: 4,
+  },
+  tabWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    borderRadius: 20,
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.2,
+    shadowRadius: 3,
+    elevation: 3,
+  },
+  tabText: {
+    fontSize: 14,
+    fontWeight: '600',
+    marginRight: 6,
+    maxWidth: 200,
+    flexShrink: 1,
+  },
+  deleteTab: {
+    padding: 4,
+    borderRadius: 12,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});