fitst commit

components/ui/SearchTabs.tsx

@@ -0,0 +1,132 @@
+import { useTheme } from '@/components/ThemeContext';
+import { TabKey } from '@/types';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { FlatList } from 'react-native-gesture-handler';
+
+interface SearchTabsProps {
+  value: TabKey;
+  onChange: (tab: TabKey) => void;
+}
+
+export default function SearchTabs({ value, onChange }: SearchTabsProps) {
+  const { isDark } = useTheme();
+  const { t } = useTranslation();
+
+  const tabs: { key: TabKey; label: string }[] = [
+    { key: 'products', label: 'Tovar va xizmatlar' },
+    { key: 'companies', label: 'Yuridik shaxslar' },
+    { key: 'countries', label: 'Davlatlar' },
+  ];
+
+  const renderTab = ({ item }: { item: { key: TabKey; label: string } }) => {
+    const isActive = value === item.key;
+    return (
+      <TouchableOpacity
+        style={[
+          styles.tab,
+          isDark ? styles.darkTab : styles.lightTab,
+          isActive && styles.activeTab,
+        ]}
+        onPress={() => onChange(item.key)}
+        activeOpacity={0.8}
+      >
+        <Text
+          style={[
+            styles.tabText,
+            isDark ? styles.darkTabText : styles.lightTabText,
+            isActive && styles.activeTabText,
+          ]}
+        >
+          {t(item.label)}
+        </Text>
+      </TouchableOpacity>
+    );
+  };
+
+  return (
+    <View style={[styles.shadowWrapper]}>
+      <View style={[styles.wrapper, isDark ? styles.darkWrapper : styles.lightWrapper]}>
+        <FlatList
+          data={tabs}
+          renderItem={renderTab}
+          keyExtractor={(item) => item.key}
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          contentContainerStyle={styles.container}
+          ItemSeparatorComponent={() => <View style={{ width: 10 }} />}
+        />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  shadowWrapper: {
+    borderRadius: 12,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.05,
+    shadowRadius: 2,
+    elevation: 2,
+  },
+
+  wrapper: {
+    borderRadius: 12,
+    overflow: 'hidden', // ENDI ISHLAYDI
+  },
+
+  darkWrapper: {
+    backgroundColor: '#0f172a',
+  },
+  lightWrapper: {
+    backgroundColor: '#ffffff',
+  },
+  container: {
+    paddingHorizontal: 2,
+    paddingVertical: 2,
+    overflow: 'hidden',
+  },
+  tab: {
+    paddingVertical: 10,
+    paddingHorizontal: 20,
+    borderRadius: 12,
+    overflow: 'hidden',
+    alignItems: 'center',
+    justifyContent: 'center',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.05,
+    shadowRadius: 2,
+    elevation: 1,
+  },
+  darkTab: {
+    backgroundColor: '#1e293b',
+  },
+  lightTab: {
+    backgroundColor: '#f8fafc',
+  },
+  activeTab: {
+    backgroundColor: '#3b82f6',
+    shadowColor: '#3b82f6',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.3,
+    shadowRadius: 4,
+    elevation: 3,
+  },
+  tabText: {
+    fontSize: 14,
+    fontWeight: '500',
+  },
+  darkTabText: {
+    color: '#cbd5e1',
+  },
+  lightTabText: {
+    color: '#64748b',
+  },
+  activeTabText: {
+    color: '#ffffff',
+    fontWeight: '600',
+  },
+});