80 lines
1.8 KiB
TypeScript
80 lines
1.8 KiB
TypeScript
import { memo } from 'react';
|
|
import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
|
|
|
|
type Category = {
|
|
id: string;
|
|
label: string;
|
|
};
|
|
|
|
type CategoryTabsProps = {
|
|
categories: Category[];
|
|
activeId: string;
|
|
onChange: (id: string) => void;
|
|
};
|
|
|
|
export function CategoryTabs({ categories, activeId, onChange }: CategoryTabsProps) {
|
|
return (
|
|
<ScrollView
|
|
horizontal
|
|
showsHorizontalScrollIndicator={false}
|
|
contentContainerStyle={styles.container}
|
|
>
|
|
{categories.map(category => (
|
|
<CategoryTabItem
|
|
key={category.id}
|
|
category={category}
|
|
isActive={category.id === activeId}
|
|
onPress={onChange}
|
|
/>
|
|
))}
|
|
</ScrollView>
|
|
);
|
|
}
|
|
|
|
type CategoryTabItemProps = {
|
|
category: Category;
|
|
isActive: boolean;
|
|
onPress: (id: string) => void;
|
|
};
|
|
|
|
const CategoryTabItem = memo(({ category, isActive, onPress }: CategoryTabItemProps) => {
|
|
return (
|
|
<Pressable onPress={() => onPress(category.id)} style={styles.tabButton}>
|
|
<Text style={[styles.label, isActive && styles.labelActive]}>{category.label}</Text>
|
|
<View style={[styles.indicator, isActive && styles.indicatorActive]} />
|
|
</Pressable>
|
|
);
|
|
});
|
|
CategoryTabItem.displayName = 'CategoryTabItem';
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
paddingVertical: 10,
|
|
paddingHorizontal: 6,
|
|
},
|
|
tabButton: {
|
|
alignItems: 'center',
|
|
marginRight: 20,
|
|
paddingBottom: 10,
|
|
},
|
|
label: {
|
|
color: '#7F8794',
|
|
fontSize: 15,
|
|
fontWeight: '600',
|
|
letterSpacing: 0.3,
|
|
},
|
|
labelActive: {
|
|
color: '#C7FF00',
|
|
},
|
|
indicator: {
|
|
alignSelf: 'stretch',
|
|
height: 3,
|
|
marginTop: 8,
|
|
backgroundColor: 'transparent',
|
|
borderRadius: 999,
|
|
},
|
|
indicatorActive: {
|
|
backgroundColor: '#C7FF00',
|
|
},
|
|
});
|