add toast

package.json

@@ -30,6 +30,7 @@
     "react-dom": "^18",
     "react-markdown": "^9.0.1",
     "react-syntax-highlighter": "^15.5.0",
+    "react-toastify": "^10.0.5",
     "rehype-highlight": "^7.0.0",
     "remark-gfm": "^4.0.0",
     "tailwind-merge": "^2.3.0",

src/app/(main)/_components/Preview.tsx

@@ -1,5 +1,6 @@
 "use client";
 import Editor from '@/app/(main)/_components/Editor';
+import { showToast } from '@/utils/toast_utils';
 import { formatReadableDate } from '@/utils/utils';
 import { EllipsisHorizontalIcon } from "@heroicons/react/24/solid";
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
@@ -184,6 +185,7 @@ const Preview = ({ logId }: { logId: string }) => {
                                 setTimeout(() => {
                                     setCopied(false);
                                 }, 2000);
+                                showToast("success", <p> Copied to Clipboard! </p>);
                             }}
                             ariaLabel="Copy to clipboard"
                         >{!copied ?
@@ -202,7 +204,7 @@ const Preview = ({ logId }: { logId: string }) => {
                         />
                     </div>
                 </div>
-            </div>
+            </div >
         </div >
     );
 }

src/app/(main)/_components/ToastProvider.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+
+interface ToastProviderProps {
+    children: React.ReactNode;
+}
+
+export default function ToastProvider({ children }: ToastProviderProps) {
+    const contextClass = {
+        success: "bg-blue-600",
+        error: "bg-red-600",
+        info: "bg-gray-600",
+        warning: "bg-orange-400",
+        default: "bg-indigo-600",
+        dark: "bg-white-600 font-gray-300",
+    };
+
+    return (
+        <>
+            {children}
+            <ToastContainer
+                toastClassName={(context) =>
+                    contextClass[context?.type || "default"] +
+                    " relative flex p-1 min-h-10 rounded-md justify-between overflow-hidden cursor-pointer"
+                }
+                bodyClassName={() => "text-sm font-white font-med block p-3"}
+                position="bottom-left"
+                autoClose={2000}
+            />
+        </>
+    );
+}

src/app/layout.tsx

@@ -2,11 +2,10 @@
 
 import { Inter } from "next/font/google";
 import { ThemeProvider } from './(main)/_components/ThemeProvider';
+import ToastProvider from "./(main)/_components/ToastProvider";
 import "./globals.css";
 import { Providers, SidebarProvider } from "./providers";
-
 const inter = Inter({ subsets: ["latin"] });
-
 export default function RootLayout({
   children,
 }: Readonly<{
@@ -25,7 +24,9 @@ export default function RootLayout({
             disableTransitionOnChange
           >
             <SidebarProvider>
-              {children}
+              <ToastProvider>
+                {children}
+              </ToastProvider>
             </SidebarProvider>
           </ThemeProvider>
         </Providers>

src/utils/toast_utils.tsx

@@ -0,0 +1,47 @@
+import { Id, Slide, ToastContent, ToastOptions, toast } from "react-toastify";
+
+
+export const defaultToastOptions: ToastOptions = {
+  position: "top-center",
+  autoClose: 4000,
+  hideProgressBar: true,
+  closeOnClick: true,
+  pauseOnHover: true,
+  draggable: true,
+  progress: undefined,
+  theme: "colored",
+  transition: Slide,
+};
+
+type ToastType = "success" | "error" | "info" | "warning" | "default";
+
+/**
+ * Display toast
+ *
+ * @param {ToastType} type
+ * @param {ToastContent} content
+ * @param {ToastOptions} [options=defaultToastOption]
+ * @return {Id}
+ */
+export const showToast = (
+  type: ToastType,
+  content: ToastContent,
+  options: Partial<ToastOptions> = {},
+): Id => {
+  const optionsToApply = { ...defaultToastOptions, ...options };
+
+  switch (type) {
+    case "success":
+      return toast.success(content, optionsToApply);
+    case "error":
+      return toast.error(content, optionsToApply);
+    case "info":
+      return toast.info(content, optionsToApply);
+    case "warning":
+      return toast.warn(content, optionsToApply);
+    case "default":
+      return toast(content, optionsToApply);
+    default:
+      return toast(content, optionsToApply);
+  }
+};