add toastify component

2024-10-26 00:51:59 +03:30
parent 638d0d78f5
commit 60276b3ba0
9 changed files with 121 additions and 5 deletions
@@ -0,0 +1,18 @@
+import { ToastContainer } from "react-toastify";
+import TickAlert from "@/components/icons/TickAlert";
+
+function CustomToastify() {
+  return (
+    <ToastContainer
+      rtl
+      closeOnClick
+      autoClose={3000}
+      closeButton={false}
+      icon={<TickAlert />}
+      position="top-center"
+      hideProgressBar={true}
+    />
+  );
+}
+
+export default CustomToastify;
@@ -783,3 +783,62 @@ html {
  background: transparent !important;
  transition: 0.5s ease-in !important;
 }
+
+/* Toastify */
+
+.Toastify__toast {
+  padding: 12px 40px 12px 12px !important;
+  font-family: iran-sans !important;
+}
+
+.Toastify__toast .Toastify__toast-body {
+  padding: 0 !important;
+}
+
+.Toastify__toast--success {
+  background: #d1e7dd !important;
+  border: 1px solid #badbcc !important;
+  color: #0f5132 !important;
+}
+
+.Toastify__toast--success .Toastify__toast-icon svg path {
+  fill: #0f5132 !important;
+}
+
+.Toastify__toast--warning {
+  background: #fff5d4 !important;
+  border: 1px solid #ffecb5 !important;
+  color: #664d03 !important;
+}
+
+.Toastify__toast--warning .Toastify__toast-icon svg path {
+  fill: #664d03 !important;
+}
+
+.Toastify__toast--error {
+  background: #f9dcdf !important;
+  border: 1px solid #f5c2c7 !important;
+  color: #842029 !important;
+}
+
+.Toastify__toast--error .Toastify__toast-icon svg path {
+  fill: #842029 !important;
+}
+
+.Toastify__toast--info {
+  background: #d5f5fc !important;
+  border: 1px solid #b6effb !important;
+  color: #055160 !important;
+}
+
+.Toastify__toast--info .Toastify__toast-icon svg path {
+  fill: #055160 !important;
+}
+
+.Toastify__toast-container .Toastify__toast-icon {
+  position: absolute;
+  right: 12px;
+  top: 16px;
+}
+
+/* End Of Toastify */
@@ -3,6 +3,10 @@ import ThemeRegistry from "./component/ThemeRegistry";
 import "jalaali-react-date-picker/lib/styles/index.css";
 import { Providers } from "./Providers";

+// Toastify
+import "react-toastify/dist/ReactToastify.css";
+import CustomToastify from "./CustomToastify";
+
 export const metadata = {
  title: "نوبت724",
  description:
@@ -22,6 +26,7 @@ export default function RootLayout({ children }) {
      <ThemeRegistry>
        <body className="bg-[#FAFAFA]">
          <Providers>{children}</Providers>
+          <CustomToastify />
        </body>
      </ThemeRegistry>
    </html>