133 lines
3.1 KiB
TypeScript
133 lines
3.1 KiB
TypeScript
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',
|
|
},
|
|
});
|