started groceries page

components/pages/grocery/GroceryList.tsx

@@ -0,0 +1,110 @@
+import { FlatList } from "react-native";
+import React, { useState } from "react";
+import { View, Text, ListItem } from "react-native-ui-lib";
+import MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons";
+
+export interface IGrocery {
+  title: String;
+  category: GroceryCategory;
+  approved: boolean;
+  bought: boolean;
+}
+
+export enum GroceryCategory {
+  Fruit = "Fruit",
+  Dairy = "Dairy",
+  Vegetables = "Vegetables",
+  Meat = "Meat",
+  Poultry = "Poultry",
+  Bakery = "Bakery",
+  Beverages = "Beverages",
+  Snacks = "Snacks",
+  Household = "Household",
+  PersonalCare = "Personal Care",
+  Frozen = "Frozen",
+}
+
+type MaterialIconNames = keyof typeof MaterialCommunityIcons.glyphMap;
+const iconMapping: { [key in GroceryCategory]: MaterialIconNames } = {
+  [GroceryCategory.Fruit]: "food-apple",
+  [GroceryCategory.Dairy]: "cheese",
+  [GroceryCategory.Vegetables]: "carrot",
+  [GroceryCategory.Meat]: "food-steak",
+  [GroceryCategory.Poultry]: "food-drumstick",
+  [GroceryCategory.Bakery]: "bread-slice",
+  [GroceryCategory.Beverages]: "cup-water",
+  [GroceryCategory.Snacks]: "candy",
+  [GroceryCategory.Household]: "home",
+  [GroceryCategory.PersonalCare]: "face-man-profile",
+  [GroceryCategory.Frozen]: "snowflake",
+};
+
+const GroceryList = () => {
+  const [groceries, setGroceries] = useState<IGrocery[]>([
+    {
+      title: "Carrots",
+      category: GroceryCategory.Vegetables,
+      approved: false,
+      bought: false,
+    },
+    {
+      title: "Steak",
+      category: GroceryCategory.Meat,
+      approved: true,
+      bought: false,
+    },
+    {
+      title: "Chicken Breast",
+      category: GroceryCategory.Poultry,
+      approved: true,
+      bought: false,
+    },
+    {
+      title: "Greek Yoghurt",
+      category: GroceryCategory.Dairy,
+      approved: false,
+      bought: false,
+    },
+  ]);
+
+  const renderItem = ({ item }: { item: IGrocery }) => (
+    <ListItem backgroundColor="white">
+      <ListItem.Part left containerStyle={{ flex: 1, paddingStart: 15 }}>
+        <View
+          height={50}
+          width={50}
+          style={{ borderRadius: 15 }}
+          backgroundColor="#e6f1ed"
+          marginR-10
+          children={
+            <MaterialCommunityIcons
+              name={iconMapping[item.category]}
+              size={50}
+              color="orange"
+            />
+          }
+        />
+        <View>
+          <Text>{item.title}</Text>
+          <Text>{iconMapping[item.category]}</Text>
+        </View>
+      </ListItem.Part>
+      <ListItem.Part right containerStyle={{ paddingEnd: 15 }}>
+        <Text style={{ color: item.approved ? "green" : "red" }}>
+          {item.approved ? "+" : "X"}
+        </Text>
+      </ListItem.Part>
+    </ListItem>
+  );
+  return (
+    <View>
+      <FlatList
+        data={groceries}
+        renderItem={renderItem}
+        keyExtractor={(item) => item.category.toString()}
+      />
+    </View>
+  );
+};
+
+export default GroceryList;