echo
3e5b85a08e
- 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.
60 lines
1.8 KiB
TypeScript
60 lines
1.8 KiB
TypeScript
import { View, Text, Pressable } from "react-native";
|
|
import { Link } from "expo-router";
|
|
import { useTheme } from "./theme";
|
|
import { CATEGORY_EMOJI } from "../lib/constants";
|
|
|
|
interface CategoryItem {
|
|
slug: string;
|
|
name: string;
|
|
icon?: string;
|
|
sortOrder: number;
|
|
}
|
|
|
|
interface CategoryGridProps {
|
|
categories: readonly CategoryItem[];
|
|
columns?: number;
|
|
}
|
|
|
|
export function CategoryGrid({ categories, columns = 3 }: CategoryGridProps) {
|
|
const theme = useTheme();
|
|
|
|
return (
|
|
<View style={{ flexDirection: "row", flexWrap: "wrap", gap: theme.spacing.sm }}>
|
|
{categories.map((cat) => {
|
|
const emoji = CATEGORY_EMOJI[cat.slug] ?? cat.icon ?? "📋";
|
|
return (
|
|
<Link key={cat.slug} href={`/(tabs)/(explore)?category=${cat.slug}`} asChild>
|
|
<Pressable
|
|
accessible
|
|
accessibilityLabel={cat.name}
|
|
accessibilityRole="button"
|
|
style={{
|
|
backgroundColor: theme.colors.surface,
|
|
borderRadius: theme.radius.md,
|
|
paddingVertical: theme.spacing.md,
|
|
paddingHorizontal: theme.spacing.sm,
|
|
borderWidth: 1,
|
|
borderColor: theme.colors.border,
|
|
width: `${Math.floor((100 - (columns - 1) * 3.3) / columns)}%` as any,
|
|
alignItems: "center",
|
|
gap: 4,
|
|
}}
|
|
>
|
|
<Text style={{ fontSize: 28 }}>{emoji}</Text>
|
|
<Text
|
|
style={{
|
|
color: theme.colors.text,
|
|
fontSize: 12,
|
|
fontWeight: "500",
|
|
textAlign: "center",
|
|
}}
|
|
>
|
|
{cat.name}
|
|
</Text>
|
|
</Pressable>
|
|
</Link>
|
|
);
|
|
})}
|
|
</View>
|
|
);
|
|
} |