update

src/screens/product/ProductListBig.tsx

@@ -0,0 +1,111 @@
+import React from "react";
+import {
+  View,
+  Text,
+  StyleSheet,
+  Image,
+  FlatList,
+  TouchableOpacity,
+  ScrollView,
+  Dimensions,
+} from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import { useNavigation, NavigationProp } from "@react-navigation/native";
+import AppLayout from "@layouts/AppLayout";
+import { globalStyles } from "styles/globalStyles";
+import Footer from "@components/footer/Footer";
+
+const screenWidth = Dimensions.get("window").width;
+const numColumns = 2;
+
+const categories = Array.from({ length: 12 }, (_, index) => ({
+  id: index + 1,
+  title: "Máy chủ",
+  image: require("../../../assets/images/category-avatar.png"),
+  link: "productlistmain",
+}));
+
+const ProductListBig = () => {
+  const navigation = useNavigation<NavigationProp<any>>();
+
+  const renderItem = ({ item }: { item: (typeof categories)[0] }) => (
+    <TouchableOpacity
+      style={styles.card}
+      onPress={() => navigation.navigate(item.link as never)}
+    >
+      <Image source={item.image} style={styles.image} resizeMode="contain" />
+      <Text style={styles.title} numberOfLines={1}>
+        {item.title}
+      </Text>
+    </TouchableOpacity>
+  );
+
+  return (
+    <AppLayout activeTab="productlist">
+      <ScrollView>
+        <View style={styles.container}>
+          {/* Breadcrumb */}
+          <View style={globalStyles.breadcrumb}>
+            <TouchableOpacity
+              style={globalStyles.breadcrumbItem}
+              onPress={() => navigation.navigate("Home" as never)}
+            >
+              <Ionicons name="home-outline" size={20} color="#637381" />
+            </TouchableOpacity>
+            <Ionicons name="chevron-forward-outline" size={14} color="#999" />
+            <Text style={[globalStyles.breadcrumbText, { fontWeight: "600" }]}>
+              Màn hình máy tính
+            </Text>
+          </View>
+          <FlatList
+            data={categories}
+            renderItem={renderItem}
+            keyExtractor={(item) => item.id.toString()}
+            numColumns={numColumns}
+            contentContainerStyle={styles.grid}
+            columnWrapperStyle={styles.columnWrapper}
+            showsVerticalScrollIndicator={false}
+          />
+        </View>
+        <Footer navigation={navigation} />
+      </ScrollView>
+    </AppLayout>
+  );
+};
+
+export default ProductListBig;
+
+const itemWidth = screenWidth / numColumns - 17;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: 10,
+  },
+  grid: {
+    paddingVertical: 10,
+  },
+  columnWrapper: {
+    justifyContent: "space-between",
+    marginBottom: 10,
+  },
+  card: {
+    width: itemWidth,
+    borderWidth: 1,
+    borderColor: "#c0c0c0",
+    borderRadius: 8,
+    padding: 10,
+    alignItems: "center",
+    backgroundColor: "#fff",
+  },
+  image: {
+    width: itemWidth,
+    height: 100,
+    marginBottom: 10,
+  },
+  title: {
+    textAlign: "center",
+    fontSize: 16,
+    fontWeight: "600",
+  },
+});