43 lines
1.3 KiB
TypeScript
43 lines
1.3 KiB
TypeScript
|
import { StyleSheet, Text, View } from '@react-pdf/renderer';
|
||
|
|
|
||
|
|
import { PDF_TOKENS } from './tokens';
|
||
|
|
|
||
|
|
export type BadgeTone = 'neutral' | 'accent' | 'success' | 'warning' | 'danger';
|
||
|
|
|
||
|
|
const toneStyles: Record<BadgeTone, { background: string; foreground: string }> = {
|
||
|
|
neutral: { background: PDF_TOKENS.colors.border, foreground: PDF_TOKENS.colors.text },
|
||
|
|
accent: { background: PDF_TOKENS.colors.accentBlue, foreground: '#ffffff' },
|
||
|
|
success: { background: PDF_TOKENS.colors.success, foreground: '#ffffff' },
|
||
|
|
warning: { background: PDF_TOKENS.colors.warning, foreground: '#ffffff' },
|
||
|
|
danger: { background: PDF_TOKENS.colors.danger, foreground: '#ffffff' },
|
||
|
|
};
|
||
|
|
|
||
|
|
const styles = StyleSheet.create({
|
||
|
|
pill: {
|
||
|
|
paddingHorizontal: 8,
|
||
|
|
paddingVertical: 3,
|
||
|
|
borderRadius: 999,
|
||
|
|
alignSelf: 'flex-start',
|
||
|
|
},
|
||
|
|
label: {
|
||
|
|
fontFamily: PDF_TOKENS.fonts.sansBold,
|
||
|
|
fontSize: PDF_TOKENS.sizes.caption,
|
||
|
|
textTransform: 'uppercase',
|
||
|
|
letterSpacing: 0.5,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
export interface BadgeProps {
|
||
|
|
text: string;
|
||
|
|
tone?: BadgeTone;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function Badge({ text, tone = 'neutral' }: BadgeProps) {
|
||
|
|
const t = toneStyles[tone];
|
||
|
|
return (
|
||
|
|
<View style={[styles.pill, { backgroundColor: t.background }]}>
|
||
|
|
<Text style={[styles.label, { color: t.foreground }]}>{text}</Text>
|
||
|
|
</View>
|
||
|
|
);
|
||
|
|
}
|