frontend: introduce badge
Pedro Lucas Porcellis porcellis@eletrotupi.com · 5 months ago
7d3aeaf1daf1dfc61e800e24e6c6bcc4b4e9af15 Browse filesParents
ed72613Changed files
1
Additions
+52
Deletions
0
/dev/null → frontend/components/ui/Badge.tsx
1 +
import {
2 +
StyleSheet,
3 +
View,
4 +
Text
5 +
} from 'react-native';
6 +
7 +
// Badge color palettes
8 +
export const badgeVariants = {
9 +
green: { bg: "#d4f5e2", text: "#1a7a48", dot: "#34c272" },
10 +
blue: { bg: "#dbeafe", text: "#1d4ed8", dot: "#3b82f6" },
11 +
yellow: { bg: "#fef9c3", text: "#854d0e", dot: "#eab308" },
12 +
red: { bg: "#fee2e2", text: "#991b1b", dot: "#ef4444" },
13 +
purple: { bg: "#ede9fe", text: "#5b21b6", dot: "#8b5cf6" },
14 +
gray: { bg: "#f1f5f9", text: "#475569", dot: "#94a3b8" },
15 +
orange: { bg: "#ffedd5", text: "#9a3412", dot: "#f97316" },
16 +
pink: { bg: "#fce7f3", text: "#9d174d", dot: "#ec4899" },
17 +
};
18 +
19 +
// TODO: Add a subtle variant and allow to drop the dot as well
20 +
// TODO: Experiment with a less round-ish version?
21 +
export const Badge = ({ label, variant = "green" }) => {
22 +
const palette = badgeVariants[variant] ?? badgeVariants.green;
23 +
24 +
const styles = StyleSheet.create({
25 +
badge: {
26 +
flexDirection: "row",
27 +
alignItems: "center",
28 +
gap: 5,
29 +
paddingVertical: 5,
30 +
paddingHorizontal: 12,
31 +
borderRadius: 999,
32 +
flexShrink: 0,
33 +
},
34 +
badgeDot: {
35 +
width: 7,
36 +
height: 7,
37 +
borderRadius: 4,
38 +
},
39 +
badgeText: {
40 +
fontSize: 13,
41 +
fontWeight: "600",
42 +
letterSpacing: 0.1,
43 +
}
44 +
});
45 +
46 +
return (
47 +
<View style={[styles.badge, { backgroundColor: palette.bg }]}>
48 +
<View style={[styles.badgeDot, { backgroundColor: palette.dot }]} />
49 +
<Text style={[styles.badgeText, { color: palette.text }]}>{label}</Text>
50 +
</View>
51 +
);
52 +
}