brain_dump and settings

components/pages/brain_dump/BrainDumpPage.tsx

@@ -0,0 +1,54 @@
+import { ScrollView } from "react-native";
+import React, { useState } from "react";
+import { View, Text } from "react-native-ui-lib";
+import DumpList from "./DumpList";
+import HeaderTemplate from "@/components/shared/HeaderTemplate";
+import { TextField } from "react-native-ui-lib";
+import { StyleSheet } from "react-native";
+import { Feather } from "@expo/vector-icons";
+import { TextInput } from "react-native-gesture-handler";
+
+const BrainDumpPage = () => {
+  const [searchText, setSearchText] = useState<string>("");
+
+  return (
+    <View>
+      <ScrollView>
+        <HeaderTemplate message={"Welcome to your notes!"} isWelcome={false} />
+        <View marginH-25>
+          <View style={styles.searchField} centerV>
+            <TextField
+              value={searchText}
+              onChangeText={(value) => {
+                setSearchText(value);
+              }}
+              leadingAccessory={
+                <Feather
+                  name="search"
+                  size={24}
+                  color="#9b9b9b"
+                  style={{ paddingRight: 10 }}
+                />
+              }
+              placeholder="Search notes..."
+            />
+          </View>
+          <DumpList searchText={searchText} />
+        </View>
+      </ScrollView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  searchField: {
+    borderWidth: 1,
+    borderColor: "#9b9b9b",
+    borderRadius: 18,
+    height: 48,
+    paddingLeft: 10,
+    marginVertical: 20,
+  },
+});
+
+export default BrainDumpPage;

components/pages/brain_dump/DumpItem.tsx

@@ -0,0 +1,30 @@
+import { View, Text } from "react-native-ui-lib";
+import React, { useState } from "react";
+import { IBrainDump } from "@/contexts/DumpContext";
+import { TouchableOpacity } from "react-native-gesture-handler";
+import MoveBrainDump from "./MoveBrainDump";
+
+const BrainDumpItem = (props: { item: IBrainDump }) => {
+  const [isVisible, setIsVisible] = useState<boolean>(false);
+
+  return (
+    <View>
+      <TouchableOpacity onPress={() => setIsVisible(true)}>
+        <View
+          backgroundColor="white"
+          marginV-5
+          padding-15
+          style={{ borderRadius: 20, elevation: 2 }}
+        >
+          <Text text70BL marginB-8>
+            {props.item.title}
+          </Text>
+          <Text text80>{props.item.description}</Text>
+        </View>
+      </TouchableOpacity>
+      <MoveBrainDump item={props.item} isVisible={isVisible} setIsVisible={setIsVisible} />
+    </View>
+  );
+};
+
+export default BrainDumpItem;

components/pages/brain_dump/DumpList.tsx

@@ -0,0 +1,27 @@
+import { View } from 'react-native-ui-lib';
+import React from 'react';
+import { useBrainDumpContext } from '@/contexts/DumpContext';
+import { FlatList } from 'react-native';
+import BrainDumpItem from './DumpItem';
+
+const DumpList = (props: { searchText: string }) => {
+  const { brainDumps } = useBrainDumpContext();
+
+  const filteredBrainDumps = props.searchText.trim() === ""
+    ? brainDumps
+    : brainDumps.filter((item) =>
+        item.title.toLowerCase().includes(props.searchText.toLowerCase())
+      );
+
+  return (
+    <View>
+      <FlatList
+        data={filteredBrainDumps}
+        keyExtractor={(item) => item.title}
+        renderItem={({ item }) => <BrainDumpItem key={item.title} item={item} />}
+      />
+    </View>
+  );
+};
+
+export default DumpList;

components/pages/brain_dump/MoveBrainDump.tsx

@@ -0,0 +1,124 @@
+import React, { useState } from "react";
+import { Button, Dialog, View, Text, TextField } from "react-native-ui-lib";
+import { StyleSheet } from "react-native";
+import { PanningDirectionsEnum } from "react-native-ui-lib/src/incubator/panView";
+import { IBrainDump } from "@/contexts/DumpContext";
+import { Entypo, EvilIcons, Feather, Octicons } from "@expo/vector-icons";
+import { TouchableOpacity } from "react-native-gesture-handler";
+
+const MoveBrainDump = (props: {
+  item: IBrainDump;
+  isVisible: boolean;
+  setIsVisible: (value: boolean) => void;
+}) => {
+  const [description, setDescription] = useState<string>(
+    props.item.description
+  );
+  return (
+    <Dialog
+      bottom={true}
+      height={"90%"}
+      panDirection={PanningDirectionsEnum.DOWN}
+      onDismiss={() => props.setIsVisible(false)}
+      containerStyle={{
+        borderRadius: 10,
+        backgroundColor: "white",
+        width: "100%",
+        alignSelf: "stretch",
+        padding: 0,
+        paddingTop: 3,
+        margin: 0,
+      }}
+      visible={props.isVisible}
+    >
+      <View row spread paddingH-10 paddingV-15>
+        <Button
+          color="#05a8b6"
+          style={styles.topBtn}
+          iconSource={() => <EvilIcons name="close" size={30} color="black" />}
+          onPress={() => {
+            props.setIsVisible(false);
+          }}
+        />
+        <Button
+          style={styles.topBtn}
+          iconSource={() => (
+            <Feather name="chevron-down" size={24} color="black" />
+          )}
+          onPress={() => {
+            props.setIsVisible(false);
+          }}
+        />
+        <View row>
+          <Button
+            style={styles.topBtn}
+            iconSource={() => (
+              <Octicons name="pencil" size={24} color="#919191" />
+            )}
+            onPress={() => {}}
+          />
+          <Button
+            style={styles.topBtn}
+            iconSource={() => (
+              <EvilIcons name="trash" size={30} color="#919191" />
+            )}
+            onPress={() => {}}
+          />
+        </View>
+      </View>
+      <View centerH>
+        <Text text60R>{props.item.title} </Text>
+      </View>
+      <View style={styles.divider} />
+      <View row marginH-20>
+        <Entypo
+          name="text"
+          size={24}
+          color="black"
+          style={{ marginBottom: "auto" }}
+        />
+        <TextField
+          textAlignVertical="top"
+          multiline
+          placeholder="Add description"
+          numberOfLines={3}
+          value={description}
+          onChangeText={(value) => {
+            setDescription(value);
+          }}
+        />
+      </View>
+      <View style={styles.divider} />
+    </Dialog>
+  );
+};
+
+const styles = StyleSheet.create({
+  divider: { height: 1, backgroundColor: "#e4e4e4", marginVertical: 15 },
+  gradient: {
+    height: "25%",
+    position: "absolute",
+    bottom: 0,
+    width: "100%",
+  },
+  buttonContainer: {
+    position: "absolute",
+    bottom: 25,
+    width: "100%",
+  },
+  button: {
+    backgroundColor: "rgb(253, 23, 117)",
+    paddingVertical: 20,
+  },
+  topBtn: {
+    backgroundColor: "white",
+    color: "#05a8b6",
+  },
+  rotateSwitch: {
+    marginLeft: 35,
+    marginBottom: 10,
+    marginTop: 25,
+  },
+});
+
+export default MoveBrainDump;

components/pages/settings/SettingsPage.tsx

@@ -0,0 +1,51 @@
+import { View, Text, Button } from "react-native-ui-lib";
+import React from "react";
+import { StyleSheet } from "react-native";
+import { Entypo, Ionicons, Octicons } from "@expo/vector-icons";
+
+const styles = StyleSheet.create({
+  mainBtn: { width: "100%", justifyContent: "flex-start", marginBottom: 20, height: 60 },
+});
+
+const SettingsPage = () => {
+  return (
+    <View centerH marginH-30 marginT-30>
+      <Button
+        backgroundColor="white"
+        style={styles.mainBtn}
+        label="Manage my profile"
+        color="#07b8c7"
+        iconSource={() => (
+          <Ionicons name="person-circle-sharp" size={24} color="#07b8c7" style={{marginRight: 10}} />
+        )}
+      />
+      <Button
+        backgroundColor="white"
+        style={styles.mainBtn}
+        label="Calendar settings"
+        color="#fd1775"
+        iconSource={() => (
+          <Ionicons name="home-outline" size={24} color="#fd1775" style={{marginRight: 10}} />
+        )}
+      />
+      <Button
+        backgroundColor="white"
+        style={styles.mainBtn}
+        label="Chore reward settings"
+        color="#ff9900"
+        iconSource={() => (<Octicons name="gear" size={24} color="#ff9900" style={{marginRight: 10}} />)}
+      />
+      <Button
+        backgroundColor="white"
+        style={styles.mainBtn}
+        label="Kaly privacy policy"
+        iconSource={() => (
+          <Entypo name="text-document" size={24} color="#6c645b" style={{marginRight: 10}} />
+        )}
+        color="#6c645b"
+      />
+    </View>
+  );
+};
+
+export default SettingsPage;