81 lines
1.9 KiB
TypeScript
81 lines
1.9 KiB
TypeScript
import React from 'react';
|
|
import { View, Text, Pressable, StyleSheet } from 'react-native';
|
|
import Animated, {
|
|
useAnimatedStyle,
|
|
withSpring,
|
|
} from 'react-native-reanimated';
|
|
import { Colors, Fonts, FontSize, BorderRadius } from '@/constants/theme';
|
|
import { triggerHaptic } from '@/utils/haptics';
|
|
|
|
interface SegmentedControlProps {
|
|
segments: string[];
|
|
activeIndex: number;
|
|
onPress: (index: number) => void;
|
|
activeColor?: string;
|
|
activeTextColor?: string;
|
|
}
|
|
|
|
export default function SegmentedControl({
|
|
segments,
|
|
activeIndex,
|
|
onPress,
|
|
activeColor = Colors.accent.green,
|
|
activeTextColor = '#000',
|
|
}: SegmentedControlProps) {
|
|
const handlePress = (index: number) => {
|
|
triggerHaptic('selection');
|
|
onPress(index);
|
|
};
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
{segments.map((segment, index) => {
|
|
const isActive = index === activeIndex;
|
|
return (
|
|
<Pressable
|
|
key={segment}
|
|
style={[
|
|
styles.segment,
|
|
isActive && { backgroundColor: activeColor },
|
|
]}
|
|
onPress={() => handlePress(index)}
|
|
>
|
|
<Text
|
|
style={[
|
|
styles.text,
|
|
isActive
|
|
? { color: activeTextColor, fontFamily: Fonts.inter.extraBold }
|
|
: { color: Colors.text.secondary },
|
|
]}
|
|
>
|
|
{segment}
|
|
</Text>
|
|
</Pressable>
|
|
);
|
|
})}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flexDirection: 'row',
|
|
backgroundColor: 'rgba(255,255,255,0.05)',
|
|
padding: 4,
|
|
borderRadius: BorderRadius.small,
|
|
borderWidth: 1,
|
|
borderColor: Colors.border.default,
|
|
},
|
|
segment: {
|
|
flex: 1,
|
|
paddingVertical: 10,
|
|
borderRadius: 10,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
text: {
|
|
fontFamily: Fonts.inter.semiBold,
|
|
fontSize: FontSize.body,
|
|
},
|
|
});
|