59 lines
1.3 KiB
TypeScript
59 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
import { StyleSheet, ViewProps } from 'react-native';
|
|
import ThemedText from '@/components/theme/default/ThemedText';
|
|
import ThemedView from '@/components/theme/default/ThemedView';
|
|
import { Colors } from '@/constants/Colors';
|
|
import { useColorScheme } from '@/hooks/useColorScheme';
|
|
|
|
type ThemedBadgeProps = ViewProps & {
|
|
value: number | string;
|
|
size?: number;
|
|
color?: string;
|
|
textColor?: string;
|
|
};
|
|
|
|
const ThemedBadge: React.FC<ThemedBadgeProps> = ({
|
|
value,
|
|
size = 24,
|
|
color,
|
|
textColor,
|
|
style,
|
|
...restProps
|
|
}) => {
|
|
const scheme = useColorScheme() ?? 'dark';
|
|
const badgeColor = color || Colors[scheme].tint;
|
|
const badgeTextColor = textColor || Colors[scheme].background;
|
|
|
|
return (
|
|
<ThemedView
|
|
style={[
|
|
styles.badge,
|
|
{
|
|
width: size,
|
|
height: size,
|
|
borderRadius: size / 2,
|
|
backgroundColor: badgeColor,
|
|
},
|
|
style,
|
|
]}
|
|
{...restProps}
|
|
>
|
|
<ThemedText style={[styles.text, { color: badgeTextColor, fontSize: size * 0.5 }]}>
|
|
{value}
|
|
</ThemedText>
|
|
</ThemedView>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
badge: {
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
text: {
|
|
fontWeight: 'bold',
|
|
},
|
|
});
|
|
|
|
export default ThemedBadge;
|