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 | 2x 2x 2x 2x 2x 19x 19x 19x 19x 19x | import React, { useMemo } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { getEventCategoryPresentation } from '@/utils/eventCategoryPresentation';
import { useTheme, type Theme } from '@/theme';
interface EventCategoryChipProps {
categoryName: string;
testID?: string;
}
export default function EventCategoryChip({
categoryName,
testID,
}: EventCategoryChipProps) {
const { theme, isDark } = useTheme();
const styles = useMemo(() => makeStyles(theme), [theme]);
const presentation = getEventCategoryPresentation(categoryName, isDark);
return (
<View
style={[styles.chip, { backgroundColor: presentation.color }]}
testID={testID}
>
<Text
numberOfLines={1}
style={[styles.text, { color: presentation.textColor }]}
>
{presentation.emoji} {presentation.label}
</Text>
</View>
);
}
function makeStyles(t: Theme) {
return StyleSheet.create({
chip: {
alignSelf: 'flex-start',
borderRadius: 999,
paddingHorizontal: 14,
paddingVertical: 8,
maxWidth: '100%',
shadowColor: '#000000',
shadowOpacity: 0.12,
shadowRadius: 10,
shadowOffset: { width: 0, height: 4 },
elevation: 2,
},
text: {
fontSize: 14,
fontWeight: '700',
},
});
}
|