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 | 1x 3x 3x 3x 24x 3x 3x 1x 1x 3x 24x 24x 1x 3x 24x | import { MatchTypes } from '@sb/types';
import React from 'react';
import { FlatList, ListRenderItemInfo, Pressable, Text, View } from 'react-native';
import { cn } from '@sb/libs';
import { useTheme } from '@sb/ui/components/Themes/ThemeProvider';
import { colors } from '@sb/styles/colors';
import {
AmericanFootball,
Ball,
Basketball,
Futsal,
Handball,
IceHockey,
Medal,
TableTennis,
Tennis,
Volleyball,
} from '@sb/ui/components/atoms/Icons/mobile/Icons.native';
interface SportCategoryListProps {
categories: MatchTypes[];
handleOnPress?: (type: MatchTypes | undefined) => void;
selectedCategory?: MatchTypes;
}
export const SportCategoryList: React.FC<SportCategoryListProps> = ({
categories,
handleOnPress,
selectedCategory,
}) => {
Iif (!categories || !Array.isArray(categories)) return null;
const sportsIconMap: Record<MatchTypes, JSX.Element> = {
All: <Medal />,
Fußball: <Futsal />,
Volleyball: <Volleyball />,
Basketball: <Basketball />,
Tennis: <Tennis />,
Handball: <Handball />,
TableTennis: <TableTennis />,
IceHockey: <IceHockey />,
'American Football': <AmericanFootball />,
};
const renderSportIcon = (sport?: MatchTypes) => {
return sport ? (sportsIconMap[sport] ?? <Ball />) : <Ball />;
};
const { theme } = useTheme();
const handleOnTypePress = (type: MatchTypes) => {
const newValue = selectedCategory === type ? undefined : type;
handleOnPress?.(newValue);
};
const renderSportCategory = (match: ListRenderItemInfo<MatchTypes>) => {
const isSelected = selectedCategory === match.item;
return (
<Pressable
className={'mt-2 items-center px-3 py-5'}
key={match.index}
onPress={() => handleOnTypePress(match.item)}
>
{React.cloneElement(renderSportIcon(match.item), {
color: isSelected ? colors[theme].colorAccent : colors[theme].colorIcon_Fill_Light,
})}
<Text
className={cn(
'mt-4',
isSelected ? 'text-accent font-Bold' : 'text-text-main font-normal'
)}
>
{match.item}
</Text>
</Pressable>
);
};
return (
<View>
<FlatList
data={categories}
horizontal
renderItem={(item) => renderSportCategory(item)}
showsHorizontalScrollIndicator={false}
/>
</View>
);
};
|