echo
ce7e400720
- Add seedCategories mutation (idempotent) and getBySlug query - Add ad queries: list, getByCategory, getById, search, getByHandyman - Home screen: search bar, CategoryGrid, recent ads list with real-time Convex queries and search-by-keyword - Explore screen: category filter via search param, filtered ad list, full category grid when unfiltered - AdCard component: title, category badge, location, rating stars, price range, navigation to ad detail - CategoryGrid component: 3-column emoji grid linking to filtered explore - Add CATEGORY_EMOJI map and getCategoryName() helper in constants All UI text in Macedonian. TypeScript clean, Convex functions deployed.
57 lines
1.7 KiB
TypeScript
57 lines
1.7 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
|
|
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>
|
|
);
|
|
} |