mojmajstor/components/ui/badge.tsx
echo 3e5b85a08e feat: Phase 7 - polish, error handling, pagination, accessibility
- Error boundary with Macedonian fallback screen and retry button
  wrapping all navigation
- Pull-to-refresh on all list/detail screens (home, explore, posts,
  chat, profile, ad detail, post detail)
- Accessibility: labels on all interactive elements, roles on
  Pressable/Button, selectable text for user data
- Deep linking: mojmajstor:// scheme configured in app.json,
  ad/[id] and chat/[id] routes work via Expo Router auto-routing
- Pagination: cursor-based paginated queries for ads, posts,
  messages, chats, reviews with Load More buttons on frontend
- Profile: shows customer posts with PostCard, loading/error states,
  create-post navigation
- Auth error messages in Macedonian (Невалидни акредитиви, итн.)

All UI text in Macedonian. TypeScript clean, Convex functions deployed.
2026-05-29 18:53:26 +02:00

30 lines
926 B
TypeScript

import { View, Text } from "react-native";
import { useTheme } from "../theme";
interface BadgeProps {
label: string;
variant?: "default" | "primary" | "success" | "error";
}
export function Badge({ label, variant = "default" }: BadgeProps) {
const theme = useTheme();
const variants = {
default: { bg: theme.colors.surface, text: theme.colors.textSecondary },
primary: { bg: theme.colors.primaryLight, text: theme.colors.primary },
success: { bg: "#D1FAE5", text: "#059669" },
error: { bg: theme.colors.errorLight, text: theme.colors.error },
};
const { bg, text: textColor } = variants[variant];
return (
<View
accessible
accessibilityLabel={label}
style={{ backgroundColor: bg, paddingHorizontal: 8, paddingVertical: 4, borderRadius: theme.radius.sm }}
>
<Text style={{ color: textColor, fontSize: 12, fontWeight: "600" }}>{label}</Text>
</View>
);
}