mojmajstor/components/ui/avatar.tsx
echo 5102ed23c1 feat: Phase 1 - project setup, auth, and base UI
Set up Expo SDK 56 project with TypeScript and Expo Router (file-based).

Backend:
- Full Convex schema (users, accounts, sessions, ads, categories,
  reviews, chats, messages, posts) deployed to self-hosted instance
- Custom email/password auth with SHA-256 hashing via Convex actions
- Query/mutation scaffolds for all domain tables
- Convex environment variables configured on backend

App structure:
- Root layout with ConvexProvider, ThemeProvider, AuthContext
- (auth) group: login and register screens (Macedonian UI)
  with role selection (handyman/customer)
- (tabs) group: 5 tabs (Home, Explore, Posts, Chat, Profile)
  each with nested Stack layouts
- Placeholder detail screens for ad, post, chat, review flows
- 404 not-found screen in Macedonian

UI primitives (components/ui/):
- Button (4 variants), Input, Card, Loading, Avatar, Rating, Badge
- ThemeProvider with light/dark palette via React context

All user-facing strings in Macedonian. Code identifiers in English.
TypeScript passes with zero errors.
2026-05-29 18:18:58 +02:00

46 lines
994 B
TypeScript

import { View, Text } from "react-native";
import { Image, type ImageContentFit } 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
source={uri}
style={{ width: size, height: size, borderRadius: size / 2 }}
contentFit="cover"
/>
);
}
return (
<View
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>
);
}