Badge

1import * as React from "react";
2import { View, Text, Pressable, ViewStyle } from "react-native";
3import { cn } from "@/lib/utils";
4import { cva, type VariantProps } from "class-variance-authority";
5 
6const badgeVariants = cva(
7  "flex-row items-center justify-center rounded-full px-2.5 py-1",
8  {
9    variants: {
10      variant: {
11        default: "bg-primary",
12        secondary: "bg-secondary",
13        destructive: "bg-destructive",
14        outline: "border border-input bg-transparent",
15      },
16      size: {
17        default: "h-8 px-3",
18        sm: "h-6 px-2.5",
19        lg: "h-10 px-4",
20      },
21    },
22    defaultVariants: {
23      variant: "default",
24      size: "default",
25    },
26  }
27);
28 
29export interface BadgeProps
30  extends VariantProps<typeof badgeVariants> {
31  className?: string;
32  style?: ViewStyle;
33  children: React.ReactNode;
34  onPress?: () => void;
35  accessibilityLabel?: string;
36}
37 
38function Badge({
39  className,
40  variant,
41  size,
42  style,
43  children,
44  onPress,
45  accessibilityLabel,
46}: BadgeProps) {
47  const getTextStyle = () => {
48    let textStyle = "font-medium";
49 
50    // Adjust text size based on badge size
51    if (size === "lg") {
52      textStyle = cn(textStyle, "text-sm");
53    } else if (size === "sm") {
54      textStyle = cn(textStyle, "text-xs");
55    } else {
56      textStyle = cn(textStyle, "text-xs");
57    }
58 
59    // Adjust text color based on variant
60    if (variant === "default") {
61      textStyle = cn(textStyle, "text-primary-foreground");
62    } else if (variant === "secondary") {
63      textStyle = cn(textStyle, "text-secondary-foreground");
64    } else if (variant === "destructive") {
65      textStyle = cn(textStyle, "text-destructive-foreground");
66    } else if (variant === "outline") {
67      textStyle = cn(textStyle, "text-foreground");
68    }
69 
70    return textStyle;
71  };
72 
73  const content = (
74    <View className={cn(badgeVariants({ variant, size, className }))} style={style}>
75      {typeof children === 'string' ? (
76        <Text
77          className={getTextStyle()}
78          numberOfLines={1}
79        >
80          {children}
81        </Text>
82      ) : (
83        children
84      )}
85    </View>
86  );
87 
88  if (onPress) {
89    return (
90      <Pressable
91        onPress={onPress}
92        accessibilityRole="button"
93        accessibilityLabel={accessibilityLabel || (typeof children === 'string' ? children : undefined)}
94      >
95        {({ pressed }) => (
96          <View style={{ opacity: pressed ? 0.7 : 1 }}>
97            {content}
98          </View>
99        )}
100// … truncated