mojmajstor/components/post-card.tsx
echo 3e5b85a08e feat: Phase 7 - polish, error handling, pagination, accessibility
- 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.
2026-05-29 18:53:26 +02:00

65 lines
2.2 KiB
TypeScript

import { View, Text, Pressable } from "react-native";
import { Link } from "expo-router";
import { useTheme } from "./theme";
import { Badge } from "./ui/badge";
import { getCategoryName } from "../lib/constants";
interface PostCardProps {
post: {
_id: string;
title: string;
description: string;
category?: string;
location?: string;
budget?: string;
status: string;
createdAt: number;
};
}
export function PostCard({ post }: PostCardProps) {
const theme = useTheme();
const categoryName = post.category ? getCategoryName(post.category) : null;
const isOpen = post.status === "open";
return (
<Link href={`/post/${post._id}` as any} asChild>
<Pressable
accessible
accessibilityLabel={`${post.title}, ${isOpen ? "отворено" : "затворено"}${post.budget ? `, ${post.budget}` : ""}`}
accessibilityRole="button"
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 }} numberOfLines={2}>
{post.title}
</Text>
<Badge label={isOpen ? "Отворено" : "Затворено"} variant={isOpen ? "success" : "error"} />
</View>
<Text style={{ fontSize: 14, color: theme.colors.textSecondary }} numberOfLines={2}>
{post.description}
</Text>
<View style={{ flexDirection: "row", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
{categoryName && <Badge label={categoryName} variant="primary" />}
{post.location && (
<Text style={{ fontSize: 13, color: theme.colors.textTertiary }}>📍 {post.location}</Text>
)}
{post.budget && (
<Text selectable style={{ fontSize: 13, color: theme.colors.primary, fontWeight: "600" }}>
💰 {post.budget}
</Text>
)}
</View>
</Pressable>
</Link>
);
}