mojmajstor/components/ad-card.tsx
echo ce7e400720 feat: Phase 2 - home screen, categories, explore, AdCard
- 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.
2026-05-29 18:24:01 +02:00

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>
);
}