brittanyellich.com
A mobile app view of atmoquest
1.5 kB
50 lines
1import { View, Text, StyleSheet, type ViewProps } from 'react-native';
2import { colors, fontFamilies, radii } from '@/theme';
3
4type PillVariant = 'default' | 'interest' | 'link' | 'role' | 'danger';
5
6interface PillProps extends ViewProps {
7 label: string;
8 variant?: PillVariant;
9}
10
11const variantStyles: Record<PillVariant, { bg: string; text: string; border: string }> = {
12 default: { bg: colors.surface0, text: colors.subtext0, border: colors.surface1 },
13 interest: { bg: colors.greenAlpha, text: colors.green, border: 'transparent' },
14 link: { bg: colors.blueAlpha, text: colors.blue, border: 'transparent' },
15 role: { bg: colors.peachAlpha, text: colors.peach, border: 'transparent' },
16 danger: { bg: colors.redAlpha, text: colors.red, border: 'transparent' },
17};
18
19/**
20 * Inline badge/pill — matches the web `.pill`, `.pill-interest`, `.pill-link` classes.
21 */
22export function Pill({ label, variant = 'default', style, ...props }: PillProps) {
23 const v = variantStyles[variant];
24 return (
25 <View
26 style={[
27 styles.pill,
28 { backgroundColor: v.bg, borderColor: v.border },
29 style,
30 ]}
31 {...props}
32 >
33 <Text style={[styles.label, { color: v.text }]}>{label}</Text>
34 </View>
35 );
36}
37
38const styles = StyleSheet.create({
39 pill: {
40 paddingHorizontal: 10,
41 paddingVertical: 4,
42 borderRadius: radii.full,
43 borderWidth: 1,
44 alignSelf: 'flex-start',
45 },
46 label: {
47 fontFamily: fontFamilies.mono,
48 fontSize: 12,
49 },
50});