added header, mock reminders

app/(auth)/reminders/index.tsx

@@ -1,7 +1,46 @@
-import {View} from "react-native-ui-lib";
+import { Card, Text, View } from "react-native-ui-lib";
-
+import { StyleSheet } from "react-native";
+import RemindersList from "@/components/pages/reminders/remindersList";
 export default function Screen() {
-    return (
+  return (
-        <View/>
+    <View height={"100%"} backgroundColor="#fdf8f5">
-    )
+      <View style={styles.banner} height={"27%"} flexS>
-}
+        <View style={styles.greetingContainer}>
+          <Text text70L color="white">
+            Good Morning,
+          </Text>
+          <Text color="white" text30BL>
+            Hello Ryanae!
+          </Text>
+        </View>
+        <View centerV style={styles.footerContainer}>
+          <Text text30>😇</Text>
+        </View>
+      </View>
+      <RemindersList />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  banner: {
+    backgroundColor: "#f68d51",
+    height: "27%",
+  },
+  greetingContainer: {
+    marginLeft: "8%",
+    paddingTop: 15,
+    paddingBottom: 20,
+    flex: 1,
+    flexDirection: "column",
+    justifyContent: "space-between",
+  },
+  footerContainer: {
+    height: 70,
+    backgroundColor: "#f9b076",
+    marginTop: "auto",
+    borderTopLeftRadius: 30,
+    marginLeft: "8%",
+    paddingLeft: "5%",
+  },
+});

components/pages/reminders/remindersList.tsx

@@ -0,0 +1,119 @@
+import { useState } from "react";
+import { StyleSheet } from "react-native";
+import {
+  Button,
+  Card,
+  Checkbox,
+  Icon,
+  ListItem,
+  Text,
+  View,
+} from "react-native-ui-lib";
+
+interface Reminder {
+  title: string;
+  date: string;
+  time: string;
+  done: boolean;
+}
+
+const RemindersList = () => {
+  const [reminders, setReminders] = useState<Reminder[]>([
+    {
+      title: "Shaving Time",
+      date: "26/02/2023",
+      time: "09:30",
+      done: true,
+    },
+    {
+      title: "Gonna get a food order",
+      date: "27/02/2023",
+      time: "10:30",
+      done: false,
+    },
+  ]);
+  return (
+    <View style={styles.listContainer}>
+      <View
+        style={{
+          display: "flex",
+          flexDirection: "row",
+          justifyContent: "space-between",
+          alignItems: "center",
+        }}
+      >
+        <Text text70BL>Reminders</Text>
+        <Button style={styles.button} size={Button.sizes.small}>
+          <Text text70L style={styles.buttonText}>
+            New reminder
+          </Text>
+        </Button>
+      </View>
+      <View style={styles.cardList}>
+        {reminders.map((reminder, index) => (
+          <Card key={index} style={{ marginBottom: 10, padding: 15 }}>
+            <View style={styles.card} row>
+              <View row>
+                <View style={styles.icon}/>
+                <View>
+                  <Text text70BL>{reminder.title}</Text>
+                  <Text text80>
+                    {reminder.date} {reminder.time}
+                  </Text>
+                </View>
+              </View>
+              <Checkbox
+                size={30}
+                color="#f68d50"
+                value={reminder.done}
+                onValueChange={() => {
+                  const updatedReminders = reminders.map((item, i) =>
+                    i === index ? { ...item, done: !item.done } : item
+                  );
+                  setReminders(updatedReminders);
+                }}
+              />
+            </View>
+          </Card>
+        ))}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  header: {
+    flex: 1,
+    flexDirection: "row",
+  },
+  listContainer: {
+    marginLeft: "8%",
+    marginTop: "4%",
+    marginRight: "4%",
+  },
+  button: {
+    backgroundColor: "white",
+    color: "black",
+    borderColor: "lightgray",
+    borderWidth: 1,
+    borderRadius: 5,
+  },
+  buttonText: {
+    margin: 0,
+  },
+  card: {
+    display: "flex",
+    justifyContent: "space-between",
+  },
+  cardList: {
+    marginTop: 10,
+  },
+  icon: {
+    borderRadius: 50,
+    height: 45,
+    width: 45,
+    backgroundColor: "#fcf4eb",
+    marginRight: 10
+  },
+});
+export default RemindersList;