Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 | 2x 8x 8x 8x | import { Text, TextStyle, View, ViewStyle } from "react-native";
import { makeStyles } from "@repo/ui/themes/makeStyles";
/** Badge visual style variants */
export type BadgeVariant = "default" | "success" | "warning" | "error" | "info";
/** Badge size options */
export type BadgeSize = "sm" | "md" | "lg";
export interface BadgeProps {
/** The text to display inside the badge */
label: string;
/** The visual style variant of the badge */
variant?: BadgeVariant;
/** The size of the badge */
size?: BadgeSize;
/** Custom styles for the badge container */
containerStyle?: ViewStyle;
/** Custom styles for the badge text */
textStyle?: TextStyle;
/** Test identifier for testing purposes */
testID?: string;
}
export const Badge = ({
label,
variant = "default",
size = "sm",
containerStyle,
textStyle,
testID,
}: BadgeProps) => {
const styles = useStyles();
return (
<View
style={[styles.container, styles[variant], styles[size], containerStyle]}
testID={testID}
>
<Text
style={[
styles.text,
styles[`${size}Text` as keyof typeof styles],
textStyle,
]}
>
{label}
</Text>
</View>
);
};
const useStyles = makeStyles((theme) => ({
container: {
alignSelf: "flex-start",
borderRadius: theme.metrics.borderRadius[2],
paddingHorizontal: theme.metrics.spacing[3],
justifyContent: "center",
alignItems: "center",
},
default: {
backgroundColor: theme.colors.background.primary,
},
success: {
backgroundColor: theme.colors.background.success, // TODO: Update later when re skin
},
warning: {
backgroundColor: theme.colors.background.warning, // TODO: Update later when re skin
},
error: {
backgroundColor: theme.colors.background.error, // TODO: Update later when re skin
},
info: {
backgroundColor: theme.colors.background.info, // TODO: Update later when re skin
},
/* Sizes */
sm: {
paddingVertical: theme.metrics.spacing[0.5],
},
md: {
paddingVertical: theme.metrics.spacing[1],
},
lg: {
paddingVertical: theme.metrics.spacing[2],
},
text: {
fontWeight: theme.metrics.fontWeight.medium,
},
smText: {
fontSize: theme.metrics.textSize[16],
},
mdText: {
fontSize: theme.metrics.textSize[18],
},
lgText: {
fontSize: theme.metrics.textSize[20],
},
}));
|