⭐ feat: add toaster, custom modal and updated it in layout.

src/app/layout.tsx

@@ -2,6 +2,8 @@ import type { Metadata } from "next";
 import { DM_Sans } from "next/font/google";
 import "./globals.css";
 import { ThemeProvider } from "@/providers/theme-provider";
+import ModalProvider from "@/providers/modal-provider";
+import { Toaster } from "@/components/ui/toaster";
 
 const font = DM_Sans({ subsets: ["latin"] });
 
@@ -27,7 +29,10 @@ export default function RootLayout({
           enableSystem
           disableTransitionOnChange
         >
-          {children}
+          <ModalProvider>
+            {children}
+            <Toaster />
+          </ModalProvider>
         </ThemeProvider>
       </body>
     </html>

src/components/global/custom.modal.tsx

@@ -0,0 +1,37 @@
+'use client'
+import { useModal } from '@/providers/modal-provider'
+import React from 'react'
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+} from '../ui/dialog'
+import { DialogTitle } from '@radix-ui/react-dialog'
+
+type Props = {
+    title: string
+    subheading: string
+    children: React.ReactNode
+    defaultOpen?: boolean
+}
+
+const CustomModal = ({ children, defaultOpen, subheading, title }: Props) => {
+    const { isOpen, setClose } = useModal()
+    return (
+        <Dialog
+            open={isOpen || defaultOpen}
+            onOpenChange={setClose}
+        >
+            <DialogContent className="overflow-scroll md:max-h-[700px] md:h-fit h-screen bg-card">
+                <DialogHeader className="pt-8 text-left">
+                    <DialogTitle className="text-2xl font-bold">{title}</DialogTitle>
+                    <DialogDescription>{subheading}</DialogDescription>
+                    {children}
+                </DialogHeader>
+            </DialogContent>
+        </Dialog>
+    )
+}
+
+export default CustomModal

src/components/ui/toaster.tsx

@@ -0,0 +1,35 @@
+"use client"
+
+import {
+    Toast,
+    ToastClose,
+    ToastDescription,
+    ToastProvider,
+    ToastTitle,
+    ToastViewport,
+} from "@/components/ui/toast"
+import { useToast } from "@/components/ui/use-toast"
+
+export function Toaster() {
+    const { toasts } = useToast()
+
+    return (
+        <ToastProvider>
+            {toasts.map(function ({ id, title, description, action, ...props }) {
+                return (
+                    <Toast key={id} {...props}>
+                        <div className="grid gap-1">
+                            {title && <ToastTitle>{title}</ToastTitle>}
+                            {description && (
+                                <ToastDescription>{description}</ToastDescription>
+                            )}
+                        </div>
+                        {action}
+                        <ToastClose />
+                    </Toast>
+                )
+            })}
+            <ToastViewport />
+        </ToastProvider>
+    )
+}