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 59 60 | 1x 9x 9x 9x | import { FC } from 'react';
import { cn } from '@sb/libs';
import { IOdds } from '../TopStories.types';
import { Text, TouchableOpacity } from 'react-native';
import { useDeviceType } from '@sb/hooks/Utilities/useDeviceType';
interface ButtonWrapperProps {
odd: IOdds;
isActive: boolean;
className?: string;
onPress: () => void;
enableAnimation: boolean;
}
const ButtonWrapper: FC<ButtonWrapperProps> = ({
odd,
onPress,
isActive,
className,
enableAnimation,
}) => {
const { isFoldable, isTablet, orientation } = useDeviceType();
const buttonType = odd.label === '1' ? 'Win' : odd.label === 'X' ? 'Draw' : 'Lose';
return (
<TouchableOpacity
className={cn(
'bg-tertiary flex-1 flex-row items-center justify-between p-3',
{
'bg-accent': isActive,
'p-2': isFoldable,
'p-5': isTablet && orientation === 'portrait',
},
className
)}
id={`${buttonType} Button`}
onPress={onPress}
activeOpacity={enableAnimation ? 0.5 : 1}
accessibilityLabel={`${buttonType} by ${odd.value}`}
accessibilityRole="button"
>
<Text
className={cn('text-text-main text-lg font-normal tracking-wide', {
'text-input-default-text': isActive,
})}
>
{odd.label}
</Text>
<Text
className={cn('text-text-main text-lg font-normal tracking-wide', {
'text-input-default-text': isActive,
})}
>
{odd.value}
</Text>
</TouchableOpacity>
);
};
export default ButtonWrapper;
|