118 lines
2.3 KiB
TypeScript
118 lines
2.3 KiB
TypeScript
import React from "react";
|
|
import { View, Text, StyleSheet, ViewStyle, StyleProp } from "react-native";
|
|
import { useTheme } from "../contexts/ThemeContext";
|
|
import { fontSize, fontWeight } from "../styles/typography";
|
|
|
|
type BadgeVariant =
|
|
| "neutral"
|
|
| "success"
|
|
| "warning"
|
|
| "danger"
|
|
| "info"
|
|
| "primary";
|
|
type BadgeSize = "sm" | "md" | "lg";
|
|
|
|
interface BadgeProps {
|
|
label: string;
|
|
variant?: BadgeVariant;
|
|
size?: BadgeSize;
|
|
style?: StyleProp<ViewStyle>;
|
|
emoji?: string;
|
|
}
|
|
|
|
export function Badge({
|
|
label,
|
|
variant = "neutral",
|
|
size = "md",
|
|
style,
|
|
emoji,
|
|
}: BadgeProps) {
|
|
const { colors } = useTheme();
|
|
|
|
const sizeStyles = {
|
|
sm: {
|
|
paddingVertical: 6,
|
|
paddingHorizontal: 12,
|
|
fontSize: fontSize.xs,
|
|
},
|
|
md: {
|
|
paddingVertical: 8,
|
|
paddingHorizontal: 14,
|
|
fontSize: fontSize.sm,
|
|
},
|
|
lg: {
|
|
paddingVertical: 10,
|
|
paddingHorizontal: 18,
|
|
fontSize: fontSize.base,
|
|
},
|
|
};
|
|
|
|
const variantStyles: Record<
|
|
BadgeVariant,
|
|
{ backgroundColor: string; color: string }
|
|
> = {
|
|
neutral: {
|
|
backgroundColor: colors.surfaceElevated,
|
|
color: colors.textSecondary,
|
|
},
|
|
success: {
|
|
backgroundColor: colors.success,
|
|
color: colors.white,
|
|
},
|
|
warning: {
|
|
backgroundColor: colors.warning,
|
|
color: colors.black,
|
|
},
|
|
danger: {
|
|
backgroundColor: colors.danger,
|
|
color: colors.white,
|
|
},
|
|
info: {
|
|
backgroundColor: colors.info,
|
|
color: colors.white,
|
|
},
|
|
primary: {
|
|
backgroundColor: colors.primary,
|
|
color: colors.white,
|
|
},
|
|
};
|
|
|
|
return (
|
|
<View
|
|
style={[
|
|
styles.badge,
|
|
{
|
|
backgroundColor: variantStyles[variant].backgroundColor,
|
|
paddingVertical: sizeStyles[size].paddingVertical,
|
|
paddingHorizontal: sizeStyles[size].paddingHorizontal,
|
|
},
|
|
style,
|
|
]}
|
|
>
|
|
<Text
|
|
style={[
|
|
styles.label,
|
|
{
|
|
color: variantStyles[variant].color,
|
|
fontSize: sizeStyles[size].fontSize,
|
|
fontWeight: fontWeight.bold,
|
|
},
|
|
]}
|
|
>
|
|
{emoji && `${emoji} `}
|
|
{label}
|
|
</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
badge: {
|
|
borderRadius: 12,
|
|
alignSelf: "flex-start",
|
|
},
|
|
label: {
|
|
textAlign: "center",
|
|
},
|
|
});
|