89 lines
2.9 KiB
TypeScript
89 lines
2.9 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, CATEGORY_EMOJI } 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);
|
|
const emoji = CATEGORY_EMOJI[ad.category] ?? "🔧";
|
|
|
|
return (
|
|
<Link href={`/ad/${ad._id}` as any} asChild>
|
|
<Pressable
|
|
accessible
|
|
accessibilityLabel={`${ad.title}, ${categoryName}, ${ad.location}${ad.priceRange ? `, ${ad.priceRange}` : ""}`}
|
|
accessibilityRole="button"
|
|
style={{
|
|
backgroundColor: theme.colors.card,
|
|
borderRadius: theme.radius.lg,
|
|
borderWidth: 1,
|
|
borderColor: theme.colors.borderLight,
|
|
...theme.shadows.sm,
|
|
overflow: "hidden",
|
|
}}
|
|
>
|
|
<View style={{ padding: theme.spacing.md, gap: theme.spacing.sm }}>
|
|
<View style={{ flexDirection: "row", alignItems: "center", gap: theme.spacing.sm }}>
|
|
<View
|
|
style={{
|
|
width: 40,
|
|
height: 40,
|
|
borderRadius: theme.radius.md,
|
|
backgroundColor: theme.colors.primaryLight,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
}}
|
|
>
|
|
<Text style={{ fontSize: 20 }}>{emoji}</Text>
|
|
</View>
|
|
<View style={{ flex: 1, gap: 2 }}>
|
|
<Text style={{ ...theme.typography.h3, color: theme.colors.text }} numberOfLines={1}>
|
|
{ad.title}
|
|
</Text>
|
|
{ad.ratingAvg != null && ad.ratingAvg > 0 && (
|
|
<Rating value={ad.ratingAvg} count={ad.reviewCount} size={13} />
|
|
)}
|
|
</View>
|
|
{ad.priceRange && (
|
|
<View
|
|
style={{
|
|
backgroundColor: theme.colors.primaryLight,
|
|
paddingHorizontal: 10,
|
|
paddingVertical: 4,
|
|
borderRadius: theme.radius.sm,
|
|
}}
|
|
>
|
|
<Text selectable style={{ fontSize: 13, fontWeight: "700", color: theme.colors.primaryDark }}>
|
|
{ad.priceRange}
|
|
</Text>
|
|
</View>
|
|
)}
|
|
</View>
|
|
|
|
<View style={{ flexDirection: "row", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
|
|
<Badge label={categoryName} variant="primary" size="sm" />
|
|
<Text style={{ ...theme.typography.caption, color: theme.colors.textTertiary }}>
|
|
📍 {ad.location}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</Pressable>
|
|
</Link>
|
|
);
|
|
}
|