102 lines
2.5 KiB
TypeScript
102 lines
2.5 KiB
TypeScript
import React, { createContext, useContext, useState, ReactNode } from "react";
|
|
import CustomSnackbar from "../components/common/CustomSnackbar";
|
|
import CheckIcon from "@/assets/icons/check_circle.svg";
|
|
import CrossIcon from "@/assets/icons/cancel.svg";
|
|
|
|
interface SnackbarContextProps {
|
|
showSnackbar: (message: string, type: "success" | "error" | "info") => void;
|
|
}
|
|
|
|
const SnackbarContext = createContext<SnackbarContextProps | undefined>(
|
|
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<SnackbarProviderProps> = ({
|
|
children,
|
|
}) => {
|
|
const [snackbar, setSnackbar] = useState({
|
|
message: "",
|
|
bgColor: "",
|
|
textColor: "",
|
|
duration: 2,
|
|
visible: false,
|
|
icon: <></>,
|
|
borderColor: "",
|
|
});
|
|
|
|
const showSnackbar = (
|
|
message: string,
|
|
type: "success" | "error" | "info"
|
|
) => {
|
|
let bgColor = "";
|
|
let textColor = "";
|
|
let borderColor = "";
|
|
let icon = <></>;
|
|
|
|
console.log(type);
|
|
|
|
if (type === "success") {
|
|
bgColor = "#DFF2E9";
|
|
textColor = "#242C3B";
|
|
borderColor = "#B6ECDD";
|
|
icon = <CheckIcon width={20} height={20} fill="#242C3B" />;
|
|
} else if (type === "error") {
|
|
bgColor = "#FDEDED";
|
|
textColor = "#D51D10";
|
|
borderColor = "#F5C6CB";
|
|
icon = <CrossIcon width={20} height={20} fill="#D51D10" />;
|
|
} else if (type === "info") {
|
|
bgColor = "#ffffff";
|
|
textColor = "#055160"; // dark blue text
|
|
borderColor = "#B6E0FE"; // optional subtle border
|
|
// icon = <InfoIcon width={20} height={20} fill="#055160" />;
|
|
}
|
|
|
|
setSnackbar({
|
|
message,
|
|
bgColor,
|
|
textColor,
|
|
borderColor,
|
|
icon,
|
|
duration: 2,
|
|
visible: true,
|
|
});
|
|
};
|
|
|
|
const hideSnackbar = () => {
|
|
setSnackbar((prevSnackbar) => ({
|
|
...prevSnackbar,
|
|
visible: false,
|
|
}));
|
|
};
|
|
|
|
return (
|
|
<SnackbarContext.Provider value={{ showSnackbar }}>
|
|
{children}
|
|
<CustomSnackbar
|
|
message={snackbar.message}
|
|
bgColor={snackbar.bgColor}
|
|
textColor={snackbar.textColor}
|
|
borderColor={snackbar.borderColor}
|
|
icon={snackbar.icon}
|
|
duration={snackbar.duration}
|
|
visible={snackbar.visible}
|
|
onDismiss={hideSnackbar}
|
|
/>
|
|
</SnackbarContext.Provider>
|
|
);
|
|
};
|
|
export default SnackbarProvider;
|