mojmajstor/app/(tabs)/(explore)/index.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

32 lines
1.2 KiB
TypeScript

import { View, Text, ScrollView } from "react-native";
import { useTheme } from "../../../components/theme";
import { CATEGORIES } from "../../../lib/constants";
export default function ExploreScreen() {
const theme = useTheme();
return (
<ScrollView
contentInsetAdjustmentBehavior="automatic"
contentContainerStyle={{ padding: theme.spacing.lg, gap: theme.spacing.md }}
>
<View style={{ flexDirection: "row", flexWrap: "wrap", gap: theme.spacing.sm }}>
{CATEGORIES.map((cat) => (
<View key={cat.slug} style={{
backgroundColor: theme.colors.surface,
borderRadius: theme.radius.md,
paddingHorizontal: theme.spacing.md,
paddingVertical: theme.spacing.md,
borderWidth: 1,
borderColor: theme.colors.border,
minWidth: "45%",
alignItems: "center",
}}>
<Text style={{ fontSize: 28, marginBottom: 4 }}>{cat.icon === "construct-outline" ? "🔧" : "📋"}</Text>
<Text style={{ color: theme.colors.text, fontSize: 14, fontWeight: "500" }}>{cat.name}</Text>
</View>
))}
</View>
</ScrollView>
);
}