[SBS-12][SBS-30] feat: My product

app/app.tsx

@@ -51,6 +51,7 @@ const config = {
         DemoCreateProduct: "create",
         DemoWriteReviewScreen : "writeReview",
         DemoCartScreen : "cart",
+        DemoMyProductScreen: "myProduct",
       },
     },
     SignUp: {

app/components/CartItem.tsx

@@ -10,8 +10,7 @@ import {
 import { MaterialCommunityIcons } from "@expo/vector-icons";
 import { Text } from "./Text";
 import Quantity from "./Quantity";
-import { colors } from "../theme/colors";
-import { spacing } from "app/theme";
+import { colors , spacing } from "app/theme";
 interface CartItems {
   id : number;
   title: string;

app/components/MyProduct.tsx

@@ -0,0 +1,60 @@
+import { spacing } from "app/theme";
+import React from "react";
+import { View, ViewStyle, ImageStyle, TextStyle } from "react-native";
+import { AutoImage } from "./AutoImage";
+import { Text } from "./Text";
+
+export interface Product {
+    id: number;
+    name: string;
+    sold: number;
+    imageUrl: string;
+}
+
+export interface MyProductProps {
+    product: Product;
+}
+const MyProduct = (props: MyProductProps) => {
+    const { name, imageUrl, sold} = props.product;
+    return (
+        <View style={$container}>
+            <AutoImage maxWidth={190} maxHeight={190} source={{ uri: imageUrl }} style={$image} />
+
+            <View style={$infor}>
+                <View>
+                    <Text style={$productName} text={name} />
+                </View>
+                <View style={$soldContainer}>
+                    <Text text={`Sold: ${sold}`} size="md" />
+                </View>
+            </View>
+        </View>
+    );
+};
+
+const $container: ViewStyle = {
+    flex: 1,
+    padding: spacing.sm,
+};
+
+const $image: ViewStyle & ImageStyle = {
+    borderRadius: 15,
+    marginBottom: spacing.xs,
+};
+
+const $infor: ViewStyle = {
+    alignItems: "flex-start",
+};
+
+const $productName: TextStyle = {
+    fontWeight: "normal",
+    marginBottom: spacing.xxs,
+    textAlign: "left",
+};
+
+const $soldContainer: TextStyle = {
+    alignItems: "center",
+    flexDirection: "row",
+};
+
+export default MyProduct;

app/navigators/DemoNavigator.tsx

@@ -16,6 +16,7 @@ import DemoCartScreen from "../screens/DemoCartScreen";
 import { colors, spacing, typography } from "../theme";
 import { AppStackParamList, AppStackScreenProps } from "./AppNavigator";
 import ProductDetailScreen from "app/screens/ProductDetailScreen/ProductDetailScreen";
+import DemoMyProductSceen from "app/screens/DemoMyProductSceen";
 
 export type DemoTabParamList = {
   DemoCommunity: undefined;
@@ -24,6 +25,7 @@ export type DemoTabParamList = {
   DemoPodcastList: undefined;
   DemoCartList: undefined;
   DemoCreateProduct: undefined;
+  DemoMyProduct: undefined;
   ProductDetail: undefined;
   LoginScreen: undefined;
   SignUpScreen: undefined;
@@ -139,6 +141,16 @@ export function DemoNavigator() {
           ),
         }}
       />
+        <Tab.Screen
+            name="DemoMyProduct"
+            component={DemoMyProductSceen}
+            options={{
+                tabBarLabel: "My product",
+                tabBarIcon: ({ focused }) => (
+                    <Icon icon="debug" color={focused ? colors.tint : undefined} size={30} />
+                ),
+            }}
+        />
     </Tab.Navigator>
   );
 }

app/screens/DemoMyProductSceen.tsx

@@ -0,0 +1,195 @@
+import React from "react";
+import { View, TouchableOpacity, ViewStyle, TextStyle } from "react-native";
+import { useNavigation } from "@react-navigation/native";
+import { Ionicons } from "@expo/vector-icons";
+import { FlatList, ScrollView } from "react-native-gesture-handler";
+import { colors, spacing } from "app/theme";
+import { Text, TextField } from "app/components";
+import FilterSortByScreen from "app/screens/FilterProductsScreen/FilterSortByIconScreen";
+
+import ProductItem, { Product } from "app/components/ProductItem";
+interface BackButtonProps {
+  tintColor: string;
+}
+
+const BackButton: React.FC<BackButtonProps> = ({ tintColor }) => {
+  const navigation = useNavigation();
+  return (
+    <TouchableOpacity style={$iconContainer} onPress={() => navigation.goBack()}>
+      <Ionicons name="arrow-back" size={24} color={tintColor} />
+    </TouchableOpacity>
+  );
+};
+
+const DemoMyProductScreen = () => {
+    const products: Product[] = [
+        {
+            id: 1,
+            name: "Men's T-shirt",
+            imageUrl: "https://res.cloudinary.com/dufmi5tf3/image/upload/v1714918926/OIP_m7ucv9.jpg",
+            description: "This is a very nice T-shirt",
+            price: 20,
+            rating: 4.5,
+            isFavorite: false,
+            discount: 10,
+        },
+        {
+          id: 2,
+            name: "Men's T-shirt",
+            imageUrl: "https://res.cloudinary.com/dufmi5tf3/image/upload/v1714918926/OIP_m7ucv9.jpg",
+            description: "This is a very nice T-shirt",
+            price: 20,
+            rating: 4.5,
+            isFavorite: false,
+            discount: 10,
+        },
+        {
+            id: 3,
+            name: "Men's T-shirt",
+            imageUrl: "https://res.cloudinary.com/dufmi5tf3/image/upload/v1714918926/OIP_m7ucv9.jpg",
+            description: "This is a very nice T-shirt",
+            price: 20,
+            rating: 4.5,
+            isFavorite: false,
+            discount: 10,
+        },
+        {
+           id: 4,
+            name: "Men's T-shirt",
+            imageUrl: "https://res.cloudinary.com/dufmi5tf3/image/upload/v1714918926/OIP_m7ucv9.jpg",
+            description: "This is a very nice T-shirt",
+            price: 20,
+            rating: 4.5,
+            isFavorite: false,
+            discount: 10,
+        },
+        {
+            id: 5,
+            name: "Men's T-shirt",
+            imageUrl: "https://res.cloudinary.com/dufmi5tf3/image/upload/v1714918926/OIP_m7ucv9.jpg",
+            description: "This is a very nice T-shirt",
+            price: 20,
+            rating: 4.5,
+            isFavorite: false,
+            discount: 10,
+        },
+        {
+            id: 6,
+            name: "Men's T-shirt",
+            imageUrl: "https://res.cloudinary.com/dufmi5tf3/image/upload/v1714918926/OIP_m7ucv9.jpg",
+            description: "This is a very nice T-shirt",
+            price: 20,
+            rating: 4.5,
+            isFavorite: false,
+            discount: 10,
+        },
+        {
+            id: 7,
+           name: "Men's T-shirt",
+            imageUrl: "https://res.cloudinary.com/dufmi5tf3/image/upload/v1714918926/OIP_m7ucv9.jpg",
+            description: "This is a very nice T-shirt",
+            price: 20,
+            rating: 4.5,
+            isFavorite: false,
+            discount: 10,
+        },
+    ];
+    return (
+        <>
+            <View style={$header}>
+                <BackButton tintColor={colors.tint} />
+                <View style={$inputContainer}>
+                    <TextField style={$input} placeholderTx="FilterProductsScreen.placeholder" focusable />
+                </View>
+                <View style={$rightIcons}>
+                    <Ionicons name="close-circle-outline" size={30} color={colors.text} style={$icon} />
+                    <Ionicons name="search" size={30} color={colors.text} style={$icon} />
+                    <Ionicons name="cart-outline" size={30} color={colors.text} style={$icon} />
+                </View>
+            </View>
+            <View style={$numberResult}>
+                <Text>{products.length}</Text>
+                <Text tx="FilterProductsScreen.results"></Text>
+            </View>
+            <ScrollView>
+                <View style={$flexContainer}>
+                  {products.length > 0 ? (
+                    <FlatList
+                      data={products}
+                      renderItem={({ item }) => <ProductItem product={item} />}
+                      keyExtractor={(item) => item.id.toString()}
+                      numColumns={2}
+                      style={$productItemContainer}
+                    />
+                ) : (
+                    <View style={$noResultsContainer}>
+                        <Text tx="FilterProductsScreen.notFound" />
+                    </View>
+                )}
+                </View>
+            </ScrollView>
+            <View>{products.length > 0 && <FilterSortByScreen></FilterSortByScreen>}</View>
+        </>
+    );
+};
+
+const $header: ViewStyle = {
+  alignItems: "center",
+  backgroundColor: colors.white,
+  flexDirection: "row",
+  justifyContent: "space-around",
+  padding: spacing.md,
+  borderBottomWidth: spacing.xxxs,
+  borderBottomColor: colors.palette.gray,
+};
+
+const $numberResult: ViewStyle = {
+  backgroundColor: colors.background,
+  padding: spacing.xxs,
+  flexDirection: "row",
+  gap: spacing.xxs,
+  alignItems: "center",
+  justifyContent: "center",
+};
+
+const $inputContainer: ViewStyle = {
+  alignItems: "flex-start",
+  borderRadius: spacing.sm,
+};
+
+const $input: TextStyle = {
+  fontSize: 14,
+  borderRadius: spacing.sm,
+};
+
+const $rightIcons: ViewStyle = {
+  flexDirection: "row",
+};
+
+const $icon: ViewStyle = {
+  marginLeft: spacing.lg,
+};
+
+const $noResultsContainer: ViewStyle = {
+  alignItems: "center",
+  flex: 1,
+  justifyContent: "center",
+  paddingVertical: spacing.lg,
+};
+
+const $iconContainer: ViewStyle = {
+  padding: spacing.xs,
+};
+
+const $flexContainer: ViewStyle = {
+  flexDirection: "row",
+  flexWrap: "wrap",
+  justifyContent: "space-between",
+};
+
+const $productItemContainer: ViewStyle = {
+  width: "48%",
+  marginBottom: spacing.sm,
+  backgroundColor: colors.palette.neutral100,
+};
+export default DemoMyProductScreen;

app/screens/DemoWriteReviewScreen.tsx

@@ -149,13 +149,13 @@ const $imageWrapper: ViewStyle = {
   position: "relative",
   marginRight: spacing.md,
   marginBottom: spacing.md,
-  flexBasis: "28%", 
-  maxWidth: "30%", 
+  flexBasis: "28%",
+  maxWidth: "30%",
   alignItems: "center",
 };
 const $selectedImage: ImageStyle = {
-  width: "100%", 
-  aspectRatio: 1, 
+  width: "100%",
+  aspectRatio: 1,
   borderRadius: spacing.xxs,
 };
 const $deleteButton: ViewStyle = {

app/screens/index.ts

@@ -5,6 +5,7 @@ export * from "./DemoCommunityScreen";
 export * from "./DemoDebugScreen";
 export * from "./DemoHomePageScreen/DemoHomePageScreen";
 export * from "./DemoCreateProductScreen";
+export * from "./DemoMyProductSceen";
 export * from "./ErrorScreen/ErrorBoundary";
 export * from "./DemoCartScreen";
 export * from "./DemoWriteReviewScreen";