57 lines
1.1 KiB
TypeScript
57 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
import { View, Text, StyleSheet } from 'react-native';
|
|
import { Fonts, FontSize } from '@/constants/theme';
|
|
|
|
interface PillBadgeProps {
|
|
label: string;
|
|
color: string;
|
|
bgColor: string;
|
|
borderColor?: string;
|
|
size?: 'sm' | 'md';
|
|
}
|
|
|
|
export default function PillBadge({ label, color, bgColor, borderColor, size = 'sm' }: PillBadgeProps) {
|
|
return (
|
|
<View style={[
|
|
styles.pill,
|
|
{
|
|
backgroundColor: bgColor,
|
|
borderColor: borderColor || bgColor,
|
|
},
|
|
size === 'md' && styles.pillMd,
|
|
]}>
|
|
<Text style={[
|
|
styles.text,
|
|
{ color },
|
|
size === 'md' && styles.textMd,
|
|
]}>
|
|
{label}
|
|
</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
pill: {
|
|
paddingHorizontal: 8,
|
|
paddingVertical: 3,
|
|
borderRadius: 6,
|
|
borderWidth: 1,
|
|
alignSelf: 'flex-start',
|
|
},
|
|
pillMd: {
|
|
paddingHorizontal: 12,
|
|
paddingVertical: 5,
|
|
borderRadius: 8,
|
|
},
|
|
text: {
|
|
fontFamily: Fonts.inter.black,
|
|
fontSize: FontSize.micro,
|
|
textTransform: 'uppercase',
|
|
letterSpacing: 1,
|
|
},
|
|
textMd: {
|
|
fontSize: FontSize.badge,
|
|
},
|
|
});
|