added new reminder modal

components/pages/reminders/addReminderModal.tsx

@@ -0,0 +1,246 @@
+import { StyleSheet } from "react-native";
+import React, { useState } from "react";
+import {
+  Dialog,
+  Text,
+  PanningProvider,
+  TextField,
+  Button,
+  View,
+  Checkbox,
+  Switch,
+  Picker,
+} from "react-native-ui-lib";
+import ButtonOutlined from "@/components/ui/ButtonOutlined";
+import AntDesign from "@expo/vector-icons/AntDesign";
+import Feather from "@expo/vector-icons/Feather";
+import Ionicons from "@expo/vector-icons/Ionicons";
+import { DateTimePicker } from "react-native-ui-lib";
+import { TouchableOpacity } from "react-native-gesture-handler";
+
+interface ReminderModalProps {
+  visible: boolean;
+  onClose: () => void;
+  /*onSave: (reminderText: string) => void;*/
+}
+
+interface reminderOptions {
+  label: string;
+  value: string;
+}
+
+const AddReminderModal = (props: ReminderModalProps) => {
+  const { visible, onClose /*, onSave*/ } = props;
+  const [reminderTitle, setReminderTitle] = useState<string>("");
+  const [time, setTime] = useState(new Date());
+  const [autoRepeat, setAutoRepeat] = useState<boolean>(false);
+  const [reminder, setReminder] = useState<reminderOptions | undefined>({
+    label: "Remind me just in time",
+    value: "just-in-time",
+  });
+
+  const reminderOptions = [
+    { label: "Remind me just in time", value: "just-in-time" },
+    { label: "Remind me 5 minutes before", value: "5-min-before" },
+    { label: "Remind me 10 minutes before", value: "10-min-before" },
+    { label: "Remind me 15 minutes before", value: "15-min-before" },
+    { label: "Remind me 30 minutes before", value: "30-min-before" },
+    { label: "Remind me 1 hour before", value: "1-hr-before" },
+    { label: "Remind me 1 day before", value: "1-day-before" },
+  ];
+
+  const handleDateTimeChange = (selectedTime: Date) => {
+    setTime(selectedTime);
+  };
+
+  return (
+    <Dialog
+      visible={visible}
+      onDismiss={onClose}
+      panDirection={PanningProvider.Directions.RIGHT}
+      containerStyle={{ borderRadius: 12, backgroundColor: "white" }}
+      height="70%"
+    >
+      <View style={styles.container}>
+        <Text style={styles.title}>New Reminder</Text>
+        <View style={styles.divider} />
+        <View style={styles.inner}>
+          <View
+            style={{
+              display: "flex",
+              flexDirection: "row",
+              justifyContent: "space-between",
+              marginBottom: 10,
+            }}
+          >
+            <Text text70>Profiles</Text>
+            <ButtonOutlined
+              title={"+ Add"}
+              size={Button.sizes.xSmall}
+              onPress={() => {}}
+            ></ButtonOutlined>
+          </View>
+          <View style={styles.iconTitle}>
+            <View
+              style={{
+                height: 25,
+                width: 25,
+                marginRight: 10,
+                borderRadius: 50,
+                backgroundColor: "#fcf4eb",
+              }}
+            />
+            <TextField
+              value={reminderTitle}
+              onChangeText={(text) => setReminderTitle(text)}
+              placeholder="Reminder Title"
+              text70L
+            />
+          </View>
+        </View>
+        <View style={styles.divider} />
+        <View style={styles.inner}>
+          <Text text70>Reminder Time</Text>
+          <View style={styles.inputsBetween}>
+            <Feather name="calendar" size={20} color="black" />
+            <DateTimePicker
+              migrateDialog
+              value={time}
+              mode="date"
+              onChange={handleDateTimeChange}
+              text70
+            />
+          </View>
+          <TouchableOpacity>
+            <View style={styles.inputsBetween}>
+              <AntDesign name="clockcircleo" size={20} color="black" />
+              <DateTimePicker
+                migrateDialog
+                value={time}
+                mode="time"
+                is24Hour={false}
+                onChange={handleDateTimeChange}
+                text70
+              />
+            </View>
+          </TouchableOpacity>
+          <View style={styles.inputsStart}>
+            <Feather
+              name="bell"
+              size={19}
+              color="black"
+              style={{ marginRight: 7 }}
+            />
+            <Picker
+              text70
+              value={reminder?.value}
+              onChange={(item: reminderOptions) => {
+                setReminder({ label: item.label, value: item.value });
+              }}
+              useDialog
+              fieldType="form"
+              placeholder="Select a reminder"
+              items={reminderOptions}
+              trailingAccessory={
+                <Feather
+                  name="chevron-down"
+                  style={{ marginLeft: "auto" }}
+                  size={22}
+                  color="black"
+                />
+              }
+            ></Picker>
+          </View>
+        </View>
+        <View style={styles.divider} />
+        <View style={styles.inner}>
+          <View style={styles.inputsStart}>
+            <Ionicons
+              name="repeat-sharp"
+              size={25}
+              color="black"
+              style={{ marginRight: 7 }}
+            />
+            <Text text70>Auto Repeat</Text>
+            <Switch
+              style={{ marginLeft: "auto" }}
+              onColor={"#00c87e"}
+              offColor={"gray"}
+              value={autoRepeat}
+              onValueChange={(value) => setAutoRepeat(value)}
+            />
+          </View>
+        </View>
+        <View style={styles.divider} />
+        <View style={styles.inner}>
+          <View flex row>
+          <ButtonOutlined
+              title={"+ Add"}
+              size={Button.sizes.medium}
+              onPress={() => {}}
+            ></ButtonOutlined>
+          </View>
+        </View>
+      </View>
+    </Dialog>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    paddingVertical: 10,
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-between'
+  },
+  inner: {
+    paddingHorizontal: 20,
+    display: "flex",
+    flexDirection: "column",
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: "400",
+    textAlign: "center",
+  },
+  divider: {
+    width: "100%",
+    height: 1,
+    backgroundColor: "#E0E0E0",
+    marginVertical: 10,
+  },
+  iconTitle: {
+    padding: 10,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: "#E0E0E0",
+    display: "flex",
+    flexDirection: "row",
+  },
+  inputsBetween: {
+    paddingVertical: 12,
+    paddingHorizontal: 15,
+    marginVertical: 5,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: "#E0E0E0",
+    display: "flex",
+    alignItems: "center",
+    flexDirection: "row",
+    justifyContent: "space-between",
+  },
+  inputsStart: {
+    paddingVertical: 12,
+    paddingHorizontal: 15,
+    marginVertical: 5,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: "#E0E0E0",
+    display: "flex",
+    alignItems: "center",
+    flexDirection: "row",
+    justifyContent: "flex-start",
+  },
+});
+
+export default AddReminderModal;

components/pages/reminders/remindersList.tsx

@@ -1,14 +1,8 @@
 import { useState } from "react";
 import { StyleSheet } from "react-native";
-import {
+import { Button, Card, Checkbox, Text, View } from "react-native-ui-lib";
-  Button,
+import AddReminderModal from "./addReminderModal";
-  Card,
+import ButtonOutlined from "@/components/ui/ButtonOutlined";
-  Checkbox,
-  Icon,
-  ListItem,
-  Text,
-  View,
-} from "react-native-ui-lib";
 
 interface Reminder {
   title: string;
@@ -18,6 +12,7 @@ interface Reminder {
 }
 
 const RemindersList = () => {
+  const [isModalVisible, setIsModalVisible] = useState(false);
   const [reminders, setReminders] = useState<Reminder[]>([
     {
       title: "Shaving Time",
@@ -32,8 +27,13 @@ const RemindersList = () => {
       done: false,
     },
   ]);
+
   return (
     <View style={styles.listContainer}>
+      <AddReminderModal
+        visible={isModalVisible}
+        onClose={() => setIsModalVisible(false)}
+      />
       <View
         style={{
           display: "flex",
@@ -43,18 +43,18 @@ const RemindersList = () => {
         }}
       >
         <Text text70BL>Reminders</Text>
-        <Button style={styles.button} size={Button.sizes.small}>
+        <ButtonOutlined
-          <Text text70L style={styles.buttonText}>
+          title={"New Reminder"}
-            New reminder
+          size={Button.sizes.small}
-          </Text>
+          onPress={() => setIsModalVisible(true)}
-        </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 style={styles.icon} />
                 <View>
                   <Text text70BL>{reminder.title}</Text>
                   <Text text80>
@@ -113,7 +113,7 @@ const styles = StyleSheet.create({
     height: 45,
     width: 45,
     backgroundColor: "#fcf4eb",
-    marginRight: 10
+    marginRight: 10,
   },
 });
 export default RemindersList;

components/ui/ButtonOutlined.tsx

@@ -0,0 +1,34 @@
+import { StyleSheet, View } from "react-native";
+import React from "react";
+import { Text, Button } from "react-native-ui-lib";
+
+interface ButtonProps {
+  title: string;
+  size: keyof typeof Button.sizes;
+  onPress: () => void;
+}
+
+const ButtonOutlined = (props: ButtonProps) => {
+  const { size, onPress, title } = props;
+  return (
+    <Button style={styles.button} size={size} onPress={onPress} avoidMinWidth>
+      <Text text80L style={styles.buttonText}>
+        {title}
+      </Text>
+    </Button>
+  );
+};
+export default ButtonOutlined;
+const styles = StyleSheet.create({
+  button: {
+    backgroundColor: "white",
+    color: "black",
+    borderColor: "lightgray",
+    borderWidth: 1,
+    borderRadius: 5,
+    padding: 0,
+    marginHorizontal: 0
+  },
+  buttonText: {
+  },
+});

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@expo/vector-icons": "^14.0.2",
         "@react-native-community/blur": "^4.4.0",
+        "@react-native-community/datetimepicker": "^8.2.0",
         "@react-native-firebase/app": "^20.3.0",
         "@react-native-firebase/auth": "^20.3.0",
         "@react-native-firebase/crashlytics": "^20.3.0",
@@ -7011,6 +7012,29 @@
         "node": ">=8"
       }
     },
+    "node_modules/@react-native-community/datetimepicker": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/@react-native-community/datetimepicker/-/datetimepicker-8.2.0.tgz",
+      "integrity": "sha512-qrUPhiBvKGuG9Y+vOqsc56RPFcHa1SU2qbAMT0hfGkoFIj3FodE0VuPVrEa8fgy7kcD5NQmkZIKgHOBLV0+hWg==",
+      "license": "MIT",
+      "dependencies": {
+        "invariant": "^2.2.4"
+      },
+      "peerDependencies": {
+        "expo": ">=50.0.0",
+        "react": "*",
+        "react-native": "*",
+        "react-native-windows": "*"
+      },
+      "peerDependenciesMeta": {
+        "expo": {
+          "optional": true
+        },
+        "react-native-windows": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@react-native-firebase/app": {
       "version": "20.3.0",
       "resolved": "https://registry.npmjs.org/@react-native-firebase/app/-/app-20.3.0.tgz",

package.json

@@ -17,6 +17,7 @@
   "dependencies": {
     "@expo/vector-icons": "^14.0.2",
     "@react-native-community/blur": "^4.4.0",
+    "@react-native-community/datetimepicker": "^8.2.0",
     "@react-native-firebase/app": "^20.3.0",
     "@react-native-firebase/auth": "^20.3.0",
     "@react-native-firebase/crashlytics": "^20.3.0",