| 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", style }) => {
|
| 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 }, style]}>
|
| 48 | <View style={[styles.badgeDot, { backgroundColor: palette.dot }]} />
|
| 49 | <Text style={[styles.badgeText, { color: palette.text }]}>{label}</Text>
|
| 50 | </View>
|
| 51 | );
|
| 52 | }
|