mojmajstor/components/ui/avatar.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

50 lines
1.1 KiB
TypeScript

import { View, Text } from "react-native";
import { Image } from "expo-image";
import { useTheme } from "../theme";
interface AvatarProps {
uri?: string | null;
name: string;
size?: number;
}
export function Avatar({ uri, name, size = 44 }: AvatarProps) {
const theme = useTheme();
const initials = name
.split(" ")
.map((w) => w[0])
.join("")
.toUpperCase()
.slice(0, 2);
if (uri) {
return (
<Image
accessible
accessibilityLabel={`Аватар на ${name}`}
source={uri}
style={{ width: size, height: size, borderRadius: size / 2 }}
contentFit="cover"
/>
);
}
return (
<View
accessible
accessibilityLabel={`Аватар на ${name}`}
style={{
width: size,
height: size,
borderRadius: size / 2,
backgroundColor: theme.colors.primaryLight,
alignItems: "center",
justifyContent: "center",
}}
>
<Text style={{ color: theme.colors.primary, fontWeight: "600", fontSize: size * 0.38 }}>
{initials}
</Text>
</View>
);
}