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 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 | 1x 5x 5x 5x 5x 1x 1x 1x 1x 1x 5x 5x | import React from 'react';
import { BetStopProps, BetStopStatus } from '@sb/ui/components/atoms/BetStop';
import { Text, View } from 'react-native';
import { Tooltip } from '@sb/ui/components/atoms/Tooltip/mobile/Tooltip.native';
import { colors } from '@sb/styles/colors';
import { cn } from '@sb/libs';
import { Futsal, RedCard, VAR } from '@sb/ui/components/atoms/Icons/mobile';
import { useTheme } from '@sb/ui/components/Themes/ThemeProvider';
export const BetStop: React.FC<BetStopProps> = ({ bet, status, className, showTooltip }) => {
const bgClass = className?.match(/bg-(?:\[.*?]|[a-zA-Z0-9-]+)/)?.[0] || 'bg-white';
const { theme } = useTheme();
const renderBetStopIcon = (status: BetStopStatus) => {
switch (status) {
case 'redCard':
return <RedCard color={colors[theme].colorStatus_Lost} />;
case 'goal':
return <Futsal color={colors[theme].colorSecondary} />;
case 'yellowCard':
return <RedCard size={24} color={colors[theme].colorStatus_Warning} />;
case 'penalty':
return (
<View className="bg-primary flex h-5 w-6 flex-row items-center justify-center rounded-[2px]">
<Text className="text-text-main text-[8px]">11m</Text>
</View>
);
case 'ownGoal':
return <View></View>;
case 'var':
return <VAR />;
default:
return null;
}
};
const renderTooltipContent = () => {
const date = new Date(bet.date).toDateString();
return (
<View className="flex flex-col">
<Text className="text-primary font-Bold text-sm">
{bet.match.homeTeam} - {bet.match.awayTeam}
</Text>
<Text className="text-xs" style={{ color: colors[theme].colorSelect_TextColor }}>
{date}
</Text>
<Text className="text-xs" style={{ color: colors[theme].colorSelect_TextColor }}>
{bet.category}
</Text>
</View>
);
};
return (
<Tooltip
id={`${bet.id}-tooltip`}
trigger="click"
content={showTooltip && renderTooltipContent()}
placement="bottom"
maxWidth={180}
className={"mt-10"}
>
<View
className={cn(
'z-0 flex h-[35px] cursor-pointer flex-row items-center gap-[1px] overflow-hidden rounded-md bg-transparent',
className
)}
>
<View
className={cn(
'z-0 flex h-full flex-col items-center justify-center gap-[5px] rounded-l-md px-2',
bgClass
)}
>
{renderBetStopIcon(status)}
</View>
<View
className={cn(
'h-full flex-1 flex-col items-start justify-center rounded-r-sm px-[8px]',
bgClass
)}
>
<Text
className="text-primary font-Bold truncate text-[10px]"
ellipsizeMode="tail"
numberOfLines={1}
>
{bet.match.homeTeam}
</Text>
<Text
className="text-primary truncate text-[10px] font-normal"
ellipsizeMode="tail"
numberOfLines={1}
>
{bet.match.awayTeam}
</Text>
</View>
</View>
</Tooltip>
);
};
|