65 lines
1.7 KiB
TypeScript
65 lines
1.7 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { Text, ScrollView, Pressable, StyleSheet } from 'react-native';
|
|
import { Colors, Fonts, FontSize, BorderRadius } from '@/constants/theme';
|
|
import { triggerHaptic } from '@/utils/haptics';
|
|
import { useTradingData } from '@/providers/TradingDataProvider';
|
|
import { buildWinRates } from '@/lib/tradingViewModels';
|
|
|
|
export default function WinRateStrip() {
|
|
const [activeIndex, setActiveIndex] = useState(0);
|
|
const { portfolio } = useTradingData();
|
|
const winRates = buildWinRates(portfolio);
|
|
|
|
return (
|
|
<ScrollView
|
|
horizontal
|
|
showsHorizontalScrollIndicator={false}
|
|
contentContainerStyle={styles.container}
|
|
>
|
|
{winRates.map((item, index) => {
|
|
const isActive = index === activeIndex;
|
|
return (
|
|
<Pressable
|
|
key={item.label}
|
|
style={[styles.pill, isActive && styles.activePill]}
|
|
onPress={() => {
|
|
triggerHaptic('selection');
|
|
setActiveIndex(index);
|
|
}}
|
|
>
|
|
<Text style={[styles.text, isActive && styles.activeText]}>
|
|
{item.label} {item.value}%
|
|
</Text>
|
|
</Pressable>
|
|
);
|
|
})}
|
|
</ScrollView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
gap: 8,
|
|
},
|
|
pill: {
|
|
paddingHorizontal: 14,
|
|
paddingVertical: 7,
|
|
borderRadius: BorderRadius.xs,
|
|
borderWidth: 1,
|
|
borderColor: Colors.border.medium,
|
|
backgroundColor: 'rgba(255,255,255,0.03)',
|
|
},
|
|
activePill: {
|
|
borderColor: 'rgba(0,255,136,0.45)',
|
|
backgroundColor: 'rgba(0,255,136,0.08)',
|
|
},
|
|
text: {
|
|
fontFamily: Fonts.mono.bold,
|
|
fontSize: FontSize.badge,
|
|
color: '#a1a1aa',
|
|
},
|
|
activeText: {
|
|
color: Colors.accent.green,
|
|
},
|
|
});
|