Set up Expo SDK 56 project with TypeScript and Expo Router (file-based). Backend: - Full Convex schema (users, accounts, sessions, ads, categories, reviews, chats, messages, posts) deployed to self-hosted instance - Custom email/password auth with SHA-256 hashing via Convex actions - Query/mutation scaffolds for all domain tables - Convex environment variables configured on backend App structure: - Root layout with ConvexProvider, ThemeProvider, AuthContext - (auth) group: login and register screens (Macedonian UI) with role selection (handyman/customer) - (tabs) group: 5 tabs (Home, Explore, Posts, Chat, Profile) each with nested Stack layouts - Placeholder detail screens for ad, post, chat, review flows - 404 not-found screen in Macedonian UI primitives (components/ui/): - Button (4 variants), Input, Card, Loading, Avatar, Rating, Badge - ThemeProvider with light/dark palette via React context All user-facing strings in Macedonian. Code identifiers in English. TypeScript passes with zero errors.
26 lines
865 B
TypeScript
26 lines
865 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 style={{ backgroundColor: bg, paddingHorizontal: 8, paddingVertical: 4, borderRadius: theme.radius.sm }}>
|
|
<Text style={{ color: textColor, fontSize: 12, fontWeight: "600" }}>{label}</Text>
|
|
</View>
|
|
);
|
|
} |