started groceries page

app/(auth)/grocery/index.tsx

@@ -1,7 +1,34 @@
-import {View} from "react-native-ui-lib";
+import { ScrollView } from "react-native";
+import { Button, Text, View } from "react-native-ui-lib";
+import Octicons from "@expo/vector-icons/Octicons";
+import GroceryList from "@/components/pages/grocery/GroceryList";
 
 export default function Screen() {
-    return (
+  return (
-        <View/>
+    <ScrollView>
-    )
+      <View backgroundColor="#e1e1e1" paddingL-20 paddingT-20 paddingB-10>
-}
+        <Text text50BL marginB-10 color="black">
+          Welcome to your grocery list!
+        </Text>
+        <View row bottom style={{justifyContent: 'space-between'}}>
+          <View>
+            <Text text70BL color="black">
+              X approved items
+            </Text>
+            <Text text70BL color="black">
+              Y pending items
+            </Text>
+          </View>
+          <Button
+          backgroundColor="#e1e1e1"
+          right
+            children={<Octicons name="share" size={24} color="black" />}
+          />
+        </View>
+      </View>
+      <View>
+        <GroceryList />
+      </View>
+    </ScrollView>
+  );
+}

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;

package-lock.json

@@ -35,6 +35,7 @@
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "react-native": "0.74.3",
+        "react-native-big-calendar": "^4.14.0",
         "react-native-calendars": "^1.1306.0",
         "react-native-gesture-handler": "~2.16.1",
         "react-native-reanimated": "~3.10.1",
@@ -9686,6 +9687,15 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/calendarize": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/calendarize/-/calendarize-1.1.1.tgz",
+      "integrity": "sha512-C2JyBAtNp2NG4DX4fA1EILggLt/5PlYzvQR0crHktoAPBc9TlIfdhzg7tWekCbe+pH6+9qoK+FhPbi+vYJJlqw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/call-bind": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
@@ -17849,9 +17859,9 @@
       }
     },
     "node_modules/micromatch": {
-      "version": "4.0.7",
+      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
-      "integrity": "sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
       "license": "MIT",
       "dependencies": {
         "braces": "^3.0.3",
@@ -19417,6 +19427,20 @@
         }
       }
     },
+    "node_modules/react-native-big-calendar": {
+      "version": "4.14.0",
+      "resolved": "https://registry.npmjs.org/react-native-big-calendar/-/react-native-big-calendar-4.14.0.tgz",
+      "integrity": "sha512-EYCxqXnRAg8QWsW3Npq3JI/9+lXlo9o6Gri7WttQQSqE/cGkVrVeKXObpvN6Cc4qrIUvnc4cgLAeM/j4+bOb6g==",
+      "license": "MIT",
+      "dependencies": {
+        "calendarize": "^1.1.1",
+        "dayjs": "^1.11.10"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/react-native-calendars": {
       "version": "1.1306.0",
       "resolved": "https://registry.npmjs.org/react-native-calendars/-/react-native-calendars-1.1306.0.tgz",