Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | 1x 3x 3x 3x 3x 9x 1x 3x | import { FC } from 'react';
import { useTopStory } from '@sb/hooks';
import { Text, View } from 'react-native';
import ButtonWrapper from './ButtonWrapper';
import { IOdds, NativeTopStoryProps } from '../TopStories.types';
import { useDeviceType } from '@sb/hooks/Utilities/useDeviceType';
import { useThemeColors } from '@sb/hooks/Utilities/useThemeColors';
const TopStory: FC<NativeTopStoryProps> = ({ data, onOddSelect, enableAnimation }) => {
const { themedColors } = useThemeColors();
const { isFoldable, isPhone, orientation } = useDeviceType();
const { selectedIndeces, handleOnOddClick } = useTopStory({ data, onOddSelect });
const renderButton = (odd: IOdds, index: number) => (
<ButtonWrapper
key={index}
odd={odd}
className="rounded-sm"
enableAnimation={enableAnimation}
onPress={() => handleOnOddClick(index)}
isActive={selectedIndeces.includes(odd.value)}
/>
);
return (
<View className="flex-1 justify-around p-4" accessibilityRole="combobox">
<View
className="items-center gap-2"
accessibilityLabel={`Match scheduled for ${data.date} at ${data.time}`}
>
<Text style={{ color: themedColors.colorText_Main }} className="font-normal">
{data.date}{' '}
<Text style={{ color: themedColors.colorAccent }} className="font-Bold">
|
</Text>{' '}
{data.time}
</Text>
<Text
style={{ color: themedColors.colorAccent }}
className="font-Bold text-center text-xl tracking-wide"
numberOfLines={isFoldable || (isPhone && orientation === 'landscape') ? 1 : undefined}
>
{data.teams.home} - {data.teams.away}
</Text>
</View>
<View
className="flex-row gap-1"
accessibilityRole="combobox"
accessibilityLabel={`${data.teams.home} vs. ${data.teams.away} Betting Odds`}
>
{data.odds.map(renderButton)}
</View>
</View>
);
};
export default TopStory;
|