upload 12/8

src/components/repair/ServiceProviderCard.tsx

@@ -1,8 +1,9 @@
 import React from "react";
-import { View, Text, Image, StyleSheet } from "react-native";
+import { View, Text, Image, StyleSheet, TouchableOpacity } from "react-native";
 import MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons";
 import Feather from "@expo/vector-icons/Feather";
 import Ionicons from "@expo/vector-icons/Ionicons";
+import { useNavigation, NavigationProp } from "@react-navigation/native";
 
 interface ServiceProviderCardProps {
   name: string;
@@ -56,20 +57,28 @@ export const ServiceProviderCard: React.FC<ServiceProviderCardProps> = ({
   showroomCount,
   isVerified = false,
 }) => {
+  const navigation = useNavigation<NavigationProp<any>>();
+
   return (
     <View style={styles.container}>
       <View style={styles.content}>
-        <View style={styles.imageContainer}>
+        <TouchableOpacity
+          style={styles.imageContainer}
+          onPress={() => navigation.navigate("detailrepair" as never)}
+        >
           <Image source={backgroundImage} style={styles.backgroundImage} />
           <Image source={favoriteIcon} style={styles.favoriteIcon} />
-        </View>
+        </TouchableOpacity>
 
-        <View style={styles.nameContainer}>
+        <TouchableOpacity
+          style={styles.nameContainer}
+          onPress={() => navigation.navigate("detailrepair" as never)}
+        >
           <Text style={styles.name}>{name}</Text>
           {verifiedIcon && (
             <Image source={verifiedIcon} style={styles.verifiedIcon} />
           )}
-        </View>
+        </TouchableOpacity>
 
         <View style={styles.specialtiesContainer}>
           <View style={styles.specialtyRow}>

src/navigation/AppNavigator.tsx

@@ -12,6 +12,7 @@ import BuildpcDeail from "../screens/buildpc/BuildpcDetail";
 import HomeShop from "../screens/shop/HomeShop";
 import DetailShop from "../screens/shop/DetailShop";
 import HomeRepairAddress from "../screens/repair_address/HomeRepairAddress";
+import DetailRepairAddress from "../screens/repair_address/DetailRepairAddress";
 
 const Stack = createStackNavigator();
 
@@ -31,6 +32,7 @@ const AppNavigator: React.FC = () => {
       <Stack.Screen name="classifieds" component={HomeShop} />
       <Stack.Screen name="detailshop" component={DetailShop} />
       <Stack.Screen name="repairaddress" component={HomeRepairAddress} />
+      <Stack.Screen name="detailrepair" component={DetailRepairAddress} />
     </Stack.Navigator>
   );
 };

src/screens/repair_address/DetailRepairAddress.tsx

@@ -0,0 +1,80 @@
+import React, { useState } from "react";
+import {
+  View,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  ScrollView,
+  Image,
+  StyleSheet,
+  Dimensions,
+  ImageBackground,
+} from "react-native";
+import { useNavigation, NavigationProp } from "@react-navigation/native";
+import AppLayout from "@layouts/AppLayout";
+import { Ionicons } from "@expo/vector-icons";
+
+const { width } = Dimensions.get("window");
+
+export default function DetailRepairAddress() {
+  const navigation = useNavigation<NavigationProp<any>>();
+
+  return (
+    <AppLayout activeTab="repairaddress">
+      <ScrollView>
+        <View style={styles.container}>
+          {/* Breadcrumb */}
+          <View style={styles.breadcrumb}>
+            <View style={styles.breadcrumbItem}>
+              <TouchableOpacity>
+                <Ionicons
+                  name="home"
+                  size={16}
+                  color="#637381"
+                  style={styles.icon}
+                />
+              </TouchableOpacity>
+              <Text style={styles.angle}>›</Text>
+            </View>
+            <View style={styles.breadcrumbItem}>
+              <Text style={styles.text}>Địa chỉ sửa chữa</Text>
+            </View>
+          </View>
+
+          <Text>Danh sách địa chỉ sửa chữa</Text>
+          <View>
+            <Image />
+          </View>
+        </View>
+      </ScrollView>
+    </AppLayout>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: 10,
+    backgroundColor: "#fff",
+  },
+  breadcrumb: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 12,
+    flexWrap: "wrap",
+  },
+  breadcrumbItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginRight: 8,
+  },
+  text: {
+    color: "#000",
+  },
+  icon: {
+    marginRight: 5,
+  },
+  angle: {
+    marginLeft: 12,
+    color: "#888",
+  },
+});

src/screens/repair_address/HomeRepairAddress.tsx

@@ -14,11 +14,10 @@ import { useNavigation, NavigationProp } from "@react-navigation/native";
 import AppLayout from "@layouts/AppLayout";
 import { Ionicons } from "@expo/vector-icons";
 import Feather from "@expo/vector-icons/Feather";
-import { url } from "inspector";
+import CategoryFilters from "@components/repair/CategoryFilters";
-import CategoryFilters from "@screens/repair_address/CategoryFilters";
+import LocationFilters from "@components/repair/LocationFilters";
-import LocationFilters from "@screens/repair_address/LocationFilters";
+import ServiceProviderList from "@components/repair/ServiceProviderList";
-import ServiceProviderList from "@screens/repair_address/ServiceProviderList";
+import ContactForm from "@components/repair/ContactForm";
-import ContactForm from "@screens/repair_address/ContactForm";
 
 const { width } = Dimensions.get("window");