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 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 | 1x 3x 3x 1x 3x 2x 3x | import { cn } from '@sb/libs/utils';
import { FC, ReactNode } from 'react';
import { X } from '../../../atoms/Icons/index.native';
import type { MatchBoardProps } from '../MatchBoard.types';
import { Text, TouchableOpacity, View } from 'react-native';
import { useThemeColors } from '@sb/hooks/Utilities/useThemeColors';
export const MatchBoard: FC<MatchBoardProps> = ({
id,
score,
minute,
onClose,
className,
matchTime,
matchStatus,
homeOpponent,
awayOpponent,
withAggregate = true,
}) => {
// Theme
const { themedColors } = useThemeColors();
const PlayingLayout = (): ReactNode => {
return (
<View className="flex flex-row items-center justify-between gap-2.5">
<Text
style={{ color: themedColors.colorText_Main }}
accessibilityLabel={`Home Opponent: ${homeOpponent}`}
className="font-Bold flex flex-1 text-left text-lg"
>
{homeOpponent}
</Text>
<View className="flex flex-col items-center gap-2.5">
{minute && (
<Text
style={{ color: themedColors.colorText_Main }}
accessibilityLabel={`Current match time: ${minute}`}
className="text-xs font-normal"
>
{minute}'
</Text>
)}
<Text
style={{ color: themedColors.colorAccent }}
accessibilityLabel={`Current score: ${score}`}
className="font-Bold text-3xl tracking-wide"
>
{score}
</Text>
{withAggregate && (
<Text
style={{ color: themedColors.colorText_Main }}
accessibilityLabel={`Aggregate score: ${score}`}
className="text-sm font-normal tracking-wide"
>
({score})
</Text>
)}
</View>
<Text
style={{ color: themedColors.colorText_Main }}
accessibilityLabel={`Away Opponent: ${awayOpponent}`}
className="font-Bold flex flex-1 text-right text-lg"
>
{awayOpponent}
</Text>
</View>
);
};
const UpcomingLayout = (): ReactNode => {
return (
<View className="flex flex-row items-center justify-between">
<Text
style={{ color: themedColors.colorText_Main }}
accessibilityLabel={`Home Opponent: ${homeOpponent}`}
className="font-Bold flex flex-1 text-left text-lg"
>
{homeOpponent}
</Text>
<View
className="flex flex-col items-center gap-3"
accessibilityLabel={`Upcoming match time: ${matchTime}`}
>
<Text style={{ color: themedColors.colorText_Main }} className="font-normal">
Heute
</Text>
<Text style={{ color: themedColors.colorText_Main }} className="font-Bold text-lg">
{matchTime}
</Text>
</View>
<Text
style={{ color: themedColors.colorText_Main }}
accessibilityLabel={`Away Opponent: ${awayOpponent}`}
className="font-Bold flex flex-1 text-right text-lg"
>
{awayOpponent}
</Text>
</View>
);
};
return (
<View
testID={id}
accessibilityRole="combobox"
accessibilityLabel={
id ? `${id} Match Board` : `${homeOpponent} vs ${awayOpponent} Match Board`
}
style={{ backgroundColor: themedColors.colorSecondary }}
className={cn(
'relative w-full px-4 py-2',
{
'py-6': onClose,
},
className
)}
>
{onClose && (
<TouchableOpacity
accessibilityLabel={
id ? `Close ${id} Match Board` : `Close ${homeOpponent} vs ${awayOpponent} match board`
}
onPress={onClose}
className="absolute right-2 top-2"
>
<X size={10} color="white" />
</TouchableOpacity>
)}
{matchStatus === 'playing' ? <PlayingLayout /> : <UpcomingLayout />}
</View>
);
};
|