165 lines
4.3 KiB
JavaScript
165 lines
4.3 KiB
JavaScript
import React from "react";
|
|
import {
|
|
FlatList,
|
|
Image,
|
|
ScrollView,
|
|
StyleSheet,
|
|
Text,
|
|
TouchableOpacity,
|
|
View,
|
|
} from "react-native";
|
|
import MasonryList from "@react-native-seoul/masonry-list";
|
|
import { useNavigation } from "@react-navigation/native";
|
|
import appliances from "../../../../assets/categories/Appliances.png";
|
|
import Home from "../../../../assets/categories/Home.png";
|
|
import EVehicle from "../../../../assets/categories/EVehicle.png";
|
|
import Ebike from "../../../../assets/categories/Ebike.png";
|
|
import Electronics from "../../../../assets/categories/Electonics.png";
|
|
import Solar from "../../../../assets/categories/Solar.png";
|
|
import HeavyEquipments from "../../../../assets/categories/HeavyEquipments.png";
|
|
|
|
const TopCategories = () => {
|
|
const navigation = useNavigation();
|
|
|
|
const cat = [
|
|
{
|
|
img: Solar,
|
|
label: "Solar",
|
|
},
|
|
{
|
|
img: Ebike,
|
|
label: "E-Bike",
|
|
},
|
|
{
|
|
img: appliances,
|
|
label: "Appliance",
|
|
},
|
|
{
|
|
img: EVehicle,
|
|
label: "E-Vehicle",
|
|
},
|
|
{
|
|
img: Electronics,
|
|
label: "Electronics",
|
|
},
|
|
// {
|
|
// img: "https://previews.123rf.com/images/sergiobarrios/sergiobarrios1305/sergiobarrios130500039/19499978-stethoscope-doctor-medical-material-detail-control-and-prevention-health.jpg",
|
|
// label: "Smart Home",
|
|
// },
|
|
{
|
|
img: HeavyEquipments,
|
|
label: "Heavy Equpment",
|
|
},
|
|
{
|
|
img: Home,
|
|
label: "Smart Home",
|
|
},
|
|
// {
|
|
// img: "https://static.vecteezy.com/system/resources/previews/023/477/419/non_2x/ai-generative-collection-of-sports-equipment-commonly-sold-at-a-supermarket-circle-label-for-a-sports-goods-free-png.png",
|
|
// label: "sports equipment",
|
|
// },
|
|
// {
|
|
// img: "https://www.automotivetrainingequipment.com/cdn/shop/files/AutoEDU-main-phone_800x.jpg?v=1633689905",
|
|
// label: "automotive training equipment",
|
|
// },
|
|
// Add the rest of the items here...
|
|
];
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<Text style={styles.header}> TOP CATEGORIES</Text>
|
|
<View
|
|
style={{
|
|
flexDirection: "row",
|
|
width: "100%",
|
|
height: 150,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<FlatList
|
|
// inverted
|
|
// style={styles.wrapper}
|
|
// numColumns={4}
|
|
horizontal
|
|
data={cat ? cat : []}
|
|
showsHorizontalScrollIndicator={false}
|
|
renderItem={({ item }) => {
|
|
return (
|
|
<TouchableOpacity
|
|
onPress={() =>
|
|
navigation.navigate("Search", { cat: item.label })
|
|
}
|
|
>
|
|
<View style={styles.AddUser}>
|
|
<Image style={styles.img} source={item.img} />
|
|
<Text
|
|
numberOfLines={2}
|
|
ellipsizeMode="tail"
|
|
style={{
|
|
color: "#000",
|
|
fontSize: 12,
|
|
// flexWrap: "wrap",
|
|
fontWeight: "500",
|
|
textAlign: "center",
|
|
textTransform: "uppercase",
|
|
// overflow: "hidden",
|
|
// paddingBottom:10
|
|
}}
|
|
>
|
|
{item.label}
|
|
</Text>
|
|
</View>
|
|
</TouchableOpacity>
|
|
);
|
|
}}
|
|
/>
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
// flex: 1,
|
|
backgroundColor: "#fff",
|
|
// alignItems: "center",
|
|
// justifyContent: "center",
|
|
width: "100%",
|
|
// marginHorizontal: 10,
|
|
padding: 10,
|
|
|
|
// height: "87%",
|
|
},
|
|
wrapper: {
|
|
width: "100%",
|
|
height: 90,
|
|
// backgroundColor: "#ffaa00",
|
|
},
|
|
header: {
|
|
fontSize: 14,
|
|
fontWeight: "700",
|
|
textTransform: "uppercase",
|
|
marginBottom: 10,
|
|
},
|
|
AddUser: {
|
|
width: 90,
|
|
// height: 70,
|
|
// padding: 10,
|
|
margin: 5,
|
|
backgroundColor: "#ffff",
|
|
alignItems: "center",
|
|
// borderRadius: 10,
|
|
|
|
// justifyContent: "center",
|
|
},
|
|
img: {
|
|
width: 70,
|
|
height: 70,
|
|
resizeMode: "cover",
|
|
borderRadius: 100,
|
|
margin: 4,
|
|
// backgroundColor: "#ffaa00",
|
|
},
|
|
});
|
|
export default TopCategories;
|