diff --git a/components/common/CustomSnackbar.tsx b/components/common/CustomSnackbar.tsx new file mode 100644 index 0000000..b638c87 --- /dev/null +++ b/components/common/CustomSnackbar.tsx @@ -0,0 +1,65 @@ +import React, { useEffect } from "react"; +import { Snackbar, Portal } from "react-native-paper"; +import { StyleSheet, Text } from "react-native"; + +interface CustomSnackbarProps { + message: string; + bgColor: string; + textColor: string; + duration: number; + visible: boolean; + onDismiss: () => void; +} + +const CustomSnackbar: React.FC = ({ + message, + bgColor, + textColor, + duration, + visible, + onDismiss, +}) => { + useEffect(() => { + if (visible) { + const timer = setTimeout(() => { + onDismiss(); + }, duration * 1000); + + return () => clearTimeout(timer); + } + }, [visible, duration, onDismiss]); + + return ( + + {message} + + ); +}; + +const styles = StyleSheet.create({ + message: { + fontStyle: "normal", + fontWeight: "bold", + }, + success: { + color: "#242C3B", + }, + error: { + color: "#D51D10", + }, + snackbar: { + borderRadius: 5, + marginBottom: 60, + color: "#242C3B", + }, +}); + +export default CustomSnackbar; diff --git a/components/home/CustomerSupportModal.tsx b/components/home/CustomerSupportModal.tsx index 4ecb20a..106629a 100644 --- a/components/home/CustomerSupportModal.tsx +++ b/components/home/CustomerSupportModal.tsx @@ -97,10 +97,10 @@ const styles = StyleSheet.create({ paddingVertical: 16, }, header: { - height: 56, borderBottomWidth: 1, borderBottomColor: "#E5E9F0", paddingHorizontal: 16, + paddingVertical: 8, flexDirection: "row", alignItems: "center", justifyContent: "space-between", diff --git a/contexts/Snackbar.tsx b/contexts/Snackbar.tsx new file mode 100644 index 0000000..6013103 --- /dev/null +++ b/contexts/Snackbar.tsx @@ -0,0 +1,73 @@ +import React, { createContext, useContext, useState, ReactNode } from "react"; +import CustomSnackbar from "../components/common/CustomSnackbar"; + +interface SnackbarContextProps { + showSnackbar: (message: string, type: "success" | "error") => void; +} + +const SnackbarContext = createContext( + undefined +); + +export const useSnackbar = () => { + const context = useContext(SnackbarContext); + if (!context) { + throw new Error("useSnackbar must be used within a SnackbarProvider"); + } + return context; +}; + +interface SnackbarProviderProps { + children: ReactNode; +} + +export const SnackbarProvider: React.FC = ({ + children, +}) => { + const [snackbar, setSnackbar] = useState({ + message: "", + bgColor: "", + textColor: "", + duration: 2, + visible: false, + }); + + const showSnackbar = ( + message: string, + type: "success" | "error" | "info" + ) => { + const bgColor = + type === "success" ? "#DFF2E9" : type === "error" ? "#FDEDED" : "#E0F7FA"; + const textColor = + type === "success" ? "#242C3B" : type === "error" ? "#D51D10" : "#00796B"; + setSnackbar({ + message, + bgColor, + textColor, + duration: 2, + visible: true, + }); + }; + + const hideSnackbar = () => { + setSnackbar((prevSnackbar) => ({ + ...prevSnackbar, + visible: false, + })); + }; + + return ( + + {children} + + + ); +}; +export default SnackbarProvider;