- 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.
58 lines
1.8 KiB
TypeScript
58 lines
1.8 KiB
TypeScript
import { View, Text, Pressable } from "react-native";
|
|
import { Link } from "expo-router";
|
|
import { useTheme } from "./theme";
|
|
import { Badge } from "./ui/badge";
|
|
import { Rating } from "./ui/rating";
|
|
import { getCategoryName } from "../lib/constants";
|
|
|
|
interface AdCardProps {
|
|
ad: {
|
|
_id: string;
|
|
title: string;
|
|
category: string;
|
|
location: string;
|
|
priceRange?: string;
|
|
ratingAvg?: number;
|
|
reviewCount: number;
|
|
};
|
|
}
|
|
|
|
export function AdCard({ ad }: AdCardProps) {
|
|
const theme = useTheme();
|
|
const categoryName = getCategoryName(ad.category);
|
|
|
|
return (
|
|
<Link href={`/ad/${ad._id}` as any} asChild>
|
|
<Pressable
|
|
style={{
|
|
backgroundColor: theme.colors.card,
|
|
borderRadius: theme.radius.lg,
|
|
padding: theme.spacing.md,
|
|
borderWidth: 1,
|
|
borderColor: theme.colors.border,
|
|
gap: theme.spacing.sm,
|
|
}}
|
|
>
|
|
<View style={{ flexDirection: "row", justifyContent: "space-between", alignItems: "flex-start" }}>
|
|
<Text style={{ fontSize: 16, fontWeight: "600", color: theme.colors.text, flex: 1 }}>
|
|
{ad.title}
|
|
</Text>
|
|
{ad.priceRange && (
|
|
<Text style={{ fontSize: 14, fontWeight: "600", color: theme.colors.primary, marginLeft: 8 }}>
|
|
{ad.priceRange}
|
|
</Text>
|
|
)}
|
|
</View>
|
|
|
|
<View style={{ flexDirection: "row", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
|
|
<Badge label={categoryName} variant="primary" />
|
|
<Text style={{ fontSize: 13, color: theme.colors.textTertiary }}>📍 {ad.location}</Text>
|
|
</View>
|
|
|
|
{ad.ratingAvg != null && ad.ratingAvg > 0 && (
|
|
<Rating value={ad.ratingAvg} count={ad.reviewCount} />
|
|
)}
|
|
</Pressable>
|
|
</Link>
|
|
);
|
|
} |