cally/components/pages/grocery/AddGroceryItem.tsx

import { StyleSheet } from "react-native";
import React, { useState } from "react";
import {
  Button,
  Colors,
  Dialog,
  Drawer,
  Text,
  View,
  PanningProvider,
} from "react-native-ui-lib";
import { useGroceryContext } from "@/contexts/GroceryContext";
interface AddGroceryItemProps {
  visible: boolean;
  onClose: () => void;
}
const AddGroceryItem = () => {
  const { setIsShopping, isShopping } = useGroceryContext();
  const [visible, setVisible] = useState<boolean>(false);

  const handleShowDialog = () => {
    setVisible(true);
  };
  const handleHideDialog = () => {
    setVisible(false);
  };
  const addGroceryDialog = (
    <Dialog
      visible={visible}
      onDismiss={handleHideDialog}
      panDirection={PanningProvider.Directions.DOWN}
      containerStyle={{ borderRadius: 12, backgroundColor: "white" }}
    >
      <View style={styles.container}>
        <Text style={styles.title}>New Grocery</Text>
        <View style={styles.divider} />
        <View style={styles.inner}>
          <Text>Category</Text>
        </View>
      </View>
    </Dialog>
  );

  return (
    <View
      row
      spread
      paddingH-25
      style={{
        position: "absolute",
        bottom: 20,
        width: "100%",
        height: 60,
      }}
    >
      {!isShopping ? (
        <View style={styles.btnContainer} row>
          <Button
            label="View shopping list"
            color="#337a11"
            flex-2
            marginR-5
            backgroundColor="#c6e0b3"
            onPress={() => setIsShopping(true)}
          />
          <Button
            label="Create new"
            color="white"
            flex-1
            backgroundColor="#19ad61"
            enableShadow
            onPress={() => {}}
          />
        </View>
      ) : (
        <View style={styles.btnContainer} row>
          <Button
            color="white"
            backgroundColor="#81a861"
            label="finish shopping"
            text60L
            style={styles.finishShopBtn}
            enableShadow
            onPress={() => setIsShopping(false)}
          />
        </View>
      )}
      {addGroceryDialog}
    </View>
  );
};

export default AddGroceryItem;

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,
  },
  btnContainer: {
    width: "100%",
    justifyContent: "center",
  },
  finishShopBtn: {
    width: "100%",
  },
  shoppingBtn: {
    flex: 1,
    marginHorizontal: 3,
  },
});