cally/components/pages/brain_dump/AddBrainDump.tsx

import { View, Text, Button, TextField } from "react-native-ui-lib";
import React, { useEffect, useState } from "react";
import { Dialog } from "react-native-ui-lib";
import { PanningDirectionsEnum } from "react-native-ui-lib/src/incubator/panView";
import CloseXIcon from "@/assets/svgs/CloseXIcon";
import { Dimensions, StyleSheet } from "react-native";
import DropModalIcon from "@/assets/svgs/DropModalIcon";
import MenuIcon from "@/assets/svgs/MenuIcon";
import { useBrainDumpContext } from "@/contexts/DumpContext";

interface IAddBrainDumpProps {
  isVisible: boolean;
  setIsVisible: (value: boolean) => void;
}
const AddBrainDump = ({
  addBrainDumpProps,
}: {
  addBrainDumpProps: IAddBrainDumpProps;
}) => {
  const { addBrainDump } = useBrainDumpContext();
  const [dumpTitle, setDumpTitle] = useState<string>("");
  const [dumpDesc, setDumpDesc] = useState<string>("");
  const { width, height } = Dimensions.get("screen");

  useEffect(() => {
    setDumpDesc("");
    setDumpTitle("");
  }, [addBrainDumpProps.isVisible]);

  return (
    <Dialog
      bottom={true}
      height={"90%"}
      width={width}
      panDirection={PanningDirectionsEnum.DOWN}
      onDismiss={() => addBrainDumpProps.setIsVisible(false)}
      containerStyle={{
        borderTopRightRadius: 15,
        borderTopLeftRadius: 15,
        backgroundColor: "white",
        padding: 0,
        paddingTop: 3,
        margin: 0,
      }}
      visible={addBrainDumpProps.isVisible}
    >
      <View row spread style={styles.topBtns} marginB-20>
        <Button
          color="#05a8b6"
          label="Cancel"
          style={styles.topBtn}
          onPress={() => {
            addBrainDumpProps.setIsVisible(false);
          }}
        />
        <DropModalIcon
          style={{ marginTop: 15 }}
          onPress={() => addBrainDumpProps.setIsVisible(false)}
        />
        <Button
          color="#05a8b6"
          label="Save"
          style={styles.topBtn}
          onPress={() => {
            addBrainDump({ id: 99, title: dumpTitle, description: dumpDesc });
            addBrainDumpProps.setIsVisible(false);
          }}
        />
      </View>
      <View marginH-20>
        <TextField
          value={dumpTitle}
          placeholder="Set Title"
          text60R
          onChangeText={(text) => {
            setDumpTitle(text);
          }}
        />
        <View height={2} backgroundColor="#b3b3b3" width={"100%"} marginB-20 />
        <TextField
          value={dumpDesc}
          placeholder="Write Description"
          text70
          onChangeText={(text) => {
            setDumpDesc(text);
          }}
        />
      </View>
    </Dialog>
  );
};

const styles = StyleSheet.create({
  topBtns: {},
  topBtn: {
    backgroundColor: "white",
    color: "#05a8b6",
  },
});

export default AddBrainDump;