ios app

2026-01-13 15:10:13 +08:00
parent 38f0885a85
commit 45d5debead
134 changed files with 16980 additions and 1 deletions
--- a/argon-pro-react-native/screens/Beauty.js
+++ b/argon-pro-react-native/screens/Beauty.js
@@ -0,0 +1,123 @@
+import React from "react";
+import {
+  StyleSheet,
+  Dimensions,
+  ImageBackground,
+  ScrollView,
+  TouchableWithoutFeedback
+} from "react-native";
+import { Block, Text, theme } from "galio-framework";
+
+import Images from "../constants/Images";
+
+const { width } = Dimensions.get("screen");
+
+const menuCategories = {
+  music: [
+    { id: "artists", title: "Artists", image: Images.Music["Artists"] },
+    { id: "concerts", title: "Concerts", image: Images.Music["Concerts"] },
+    { id: "DJs", title: "DJs", image: Images.Music["DJs"] }
+  ],
+  beauty: [
+    { id: "hands", title: "Hands", image: Images.Music["Hands"] },
+    { id: "body", title: "Body", image: Images.Music["Body"] },
+    { id: "face", title: "Face", image: Images.Music["Face"] }
+  ],
+  fashion: [
+    { id: "trends", title: "Trends", image: Images.Music["Trends"] },
+    { id: "clothes", title: "Clothes", image: Images.Music["Clothes"] },
+    { id: "accessory", title: "Accessory", image: Images.Music["Accessory"] }
+  ],
+  clothes: [
+    { id: "fashion", title: "Fashion", image: Images.Music["Fashion"] },
+    { id: "garagesale", title: "Garage Sale", image: Images.Music["Garage_sale"] },
+    { id: "weddingdress", title: "Wedding Dress", image: Images.Music["Wedding_dress"] }
+  ]
+};
+
+export default class Categories extends React.Component {
+  renderCategories = () => {
+    const { navigation, route } = this.props;
+    // const tabId = navigation.getParam("tabId");
+    // const categories = tabId ? menuCategories[tabId] : menuCategories.beauty;
+    const tabId = route.params?.tabId;
+    const categories = tabId ? menuCategories[tabId] : menuCategories.beauty;
+
+    return (
+      <ScrollView
+        showsVerticalScrollIndicator={false}
+        contentContainerStyle={styles.categoryList}
+      >
+        <Block flex>
+          {categories.map(category => (
+            <TouchableWithoutFeedback
+              key={`category-${category.id}`}
+              onPress={() => navigation.navigate("Category", { ...category })}
+            >
+              <Block flex card style={[styles.category, styles.shadow]}>
+                <ImageBackground
+                  source={{ uri: category.image }}
+                  style={[
+                    styles.imageBlock,
+                    { width: width - theme.SIZES.BASE * 2, height: 252 }
+                  ]}
+                  imageStyle={{
+                    width: width - theme.SIZES.BASE * 2,
+                    height: 252
+                  }}
+                >
+                  <Block style={styles.categoryTitle}>
+                    <Text style={{ fontFamily: 'open-sans-bold' }} size={18} color={theme.COLORS.WHITE}>
+                      {category.title}
+                    </Text>
+                  </Block>
+                </ImageBackground>
+              </Block>
+            </TouchableWithoutFeedback>
+          ))}
+        </Block>
+      </ScrollView>
+    );
+  };
+  render() {
+    return (
+      <Block flex center style={styles.categories}>
+        {this.renderCategories()}
+      </Block>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  categories: {
+    width
+  },
+  categoryList: {
+    justifyContent: "center",
+    paddingTop: theme.SIZES.BASE * 1.5
+  },
+  category: {
+    backgroundColor: theme.COLORS.WHITE,
+    marginHorizontal: theme.SIZES.BASE,
+    marginVertical: theme.SIZES.BASE / 2,
+    borderWidth: 0
+  },
+  categoryTitle: {
+    height: "100%",
+    paddingHorizontal: theme.SIZES.BASE,
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  imageBlock: {
+    overflow: "hidden",
+    borderRadius: 4
+  },
+  shadow: {
+    shadowColor: theme.COLORS.BLACK,
+    shadowOffset: { width: 0, height: 2 },
+    shadowRadius: 3,
+    shadowOpacity: 0.1,
+    elevation: 2
+  }
+});