111 lines
2.8 KiB
TypeScript
111 lines
2.8 KiB
TypeScript
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>
|
|
</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",
|
|
},
|
|
});
|