44 lines
1.4 KiB
TypeScript
44 lines
1.4 KiB
TypeScript
import { View, Text } from "react-native";
|
|
import { useTheme } from "../theme";
|
|
|
|
interface BadgeProps {
|
|
label: string;
|
|
variant?: "default" | "primary" | "success" | "error" | "warning";
|
|
size?: "sm" | "md";
|
|
}
|
|
|
|
export function Badge({ label, variant = "default", size = "md" }: BadgeProps) {
|
|
const theme = useTheme();
|
|
|
|
const styles = {
|
|
default: { bg: theme.colors.surfaceAlt, text: theme.colors.textSecondary, border: theme.colors.borderLight },
|
|
primary: { bg: theme.colors.primaryLight, text: theme.colors.primaryDark, border: theme.colors.primaryMuted },
|
|
success: { bg: theme.colors.successLight, text: theme.colors.success, border: theme.colors.successLight },
|
|
error: { bg: theme.colors.errorLight, text: theme.colors.error, border: theme.colors.errorLight },
|
|
warning: { bg: theme.colors.starLight, text: "#92400E", border: theme.colors.starLight },
|
|
};
|
|
|
|
const { bg, text: textColor, border } = styles[variant];
|
|
const isSmall = size === "sm";
|
|
|
|
return (
|
|
<View
|
|
accessible
|
|
accessibilityLabel={label}
|
|
style={{
|
|
backgroundColor: bg,
|
|
paddingHorizontal: isSmall ? 10 : 14,
|
|
paddingVertical: isSmall ? 4 : 6,
|
|
borderRadius: theme.radius.full,
|
|
borderWidth: 1,
|
|
borderColor: border,
|
|
alignSelf: "flex-start",
|
|
}}
|
|
>
|
|
<Text style={{ color: textColor, fontSize: isSmall ? 11 : 12, fontWeight: "600", letterSpacing: 0.4 }}>
|
|
{label}
|
|
</Text>
|
|
</View>
|
|
);
|
|
}
|