eletrotupi / tcc/ commit / 3ba2611

frontend: make badge stylezable

Pedro Lucas Porcellis porcellis@eletrotupi.com · 5 months ago 3ba261137ca571910bf859e5d20a337ed6675ea7 Browse files
Parents 41f25ec
Changed files
1
Additions
+2
Deletions
-2
frontend/components/ui/Badge.tsx modified+2 -2
frontend/components/ui/Badge.tsx
1 1 
import {
2 2 
  StyleSheet,
3 3 
  View,
4 4 
  Text
5 5 
} from 'react-native';
16 16 
  pink:   { bg: "#fce7f3", text: "#9d174d", dot: "#ec4899" },
17 17 
};
18 18
19 19 
// TODO: Add a subtle variant and allow to drop the dot as well
20 20 
// TODO: Experiment with a less round-ish version?
21 - 
export const Badge = ({ label, variant = "green" }) => {
21 + 
export const Badge = ({ label, variant = "green", style }) => {
22 22 
  const palette = badgeVariants[variant] ?? badgeVariants.green;
23 23
24 24 
  const styles = StyleSheet.create({
25 25 
    badge: {
26 26 
      flexDirection: "row",
42 42 
      letterSpacing: 0.1,
43 43 
    }
44 44 
  });
45 45
46 46 
  return (
47 - 
    <View style={[styles.badge, { backgroundColor: palette.bg }]}>
47 + 
    <View style={[styles.badge, { backgroundColor: palette.bg }, style]}>
48 48 
      <View style={[styles.badgeDot, { backgroundColor: palette.dot }]} />
49 49 
      <Text style={[styles.badgeText, { color: palette.text }]}>{label}</Text>
50 50 
    </View>
51 51 
  );
52 52 
}