updated the verify email

src/app/(auth)/verify-email/page.tsx

+// "use client";
+
+// import { useAppDispatch } from '@/hooks/hook';
+// import { PATH } from '@/routes/PATH';
+// import { useSendVerificationLinkAgainMutation } from '@/services/authApi';
+// import { showToast, ToastVariant } from '@/slice/toastSlice';
+// import { Box, Button, Typography } from '@mui/material'
+// import Image from 'next/image'
+// import Link from 'next/link'
+// import { useRouter, useSearchParams } from 'next/navigation';
+// import React from 'react'
+
+// export default function VerifyEmail() {
+//     const router = useRouter();
+//     const searchParams = useSearchParams();
+//     const email = searchParams.get("email");
+//     const [sendEmailVerificationAgain, { isLoading: sendingLink }] = useSendVerificationLinkAgainMutation();
+//     const dispatch = useAppDispatch();
+//     const handleLinkResend = async () => {
+//         try {
+//             const response = await sendEmailVerificationAgain({ email: email || "" }).unwrap();
+//             dispatch(
+//                 showToast({
+//                     message: response?.message || "Link sent successfully",
+//                     variant: ToastVariant.SUCCESS,
+//                     autoTime: true,
+//                 }),
+//             );
+//         }
+//         catch (e: any) {
+//             dispatch(
+//                 showToast({
+//                     message: e?.data?.message || "Unable to send link. Try again later",
+//                     variant: ToastVariant.ERROR,
+//                     autoTime: true,
+//                 }),
+//             );
+//         }
+//     }
+
+//     return (
+//         <Box className="max-w-[520px] mx-auto flex flex-col gap-3 items-center text-center">
+//             <Image src={"/assets/images/verify-email.png"} alt='' width={180} height={140} />
+//             <h1 className='text-[24px] lg:text-[32px] leading-[120%] font-bold mb-4'>Verify your email to
+//                 get the fun started</h1>
+//             {/* <Typography variant="h1" className='font-[700]'></Typography> */}
+//             <p className='text-[14px] leading-[120%] font-normal lg:text-[16px] mb-4'>Check the link sent to <strong className='underline text-secondary'>{email}</strong> to activate your account.</p>
+//             {/* <p className='text-[14px] leading-[120%] font-normal lg:text-[16px] mb-4'>Check your email for verification link.</p> */}
+//             <Button fullWidth size="large" type="submit" variant="contained" color="primary" className='!mb-6' onClick={() => {
+//                 router.replace(PATH.DASHBOARD.ROOT)
+//             }}>
+//                 Verify now
+//             </Button>
+//             <h2 className='text-[20px] lg:text-[28px] leading-[120%] font-bold'>Don’t see the email?</h2>
+//             <p className='text-[11px] lg:text-[14px] leading-[150%] font-normal'>Please check <strong>your spam or junk folder,</strong> as the email may have been filtered there. Also, ensure that the email address you entered is correct. Still not found?</p>
+//             <Button fullWidth variant="contained" color="secondary" onClick={handleLinkResend}>
+//                 {sendingLink ? "Sending Again" : "Send Again"}
+//             </Button>
+//         </Box>
+//     )
+// }
+
 "use client";
 
 import { useAppDispatch } from '@/hooks/hook';
 import { PATH } from '@/routes/PATH';
 import { useSendVerificationLinkAgainMutation } from '@/services/authApi';
 import { showToast, ToastVariant } from '@/slice/toastSlice';
-import { Box, Button, Typography } from '@mui/material'
-import Image from 'next/image'
-import Link from 'next/link'
+import { Box, Button } from '@mui/material';
+import Image from 'next/image';
+import Link from 'next/link';
 import { useRouter, useSearchParams } from 'next/navigation';
-import React from 'react'
+import React, { Suspense } from 'react';
 
-export default function VerifyEmail() {
+function VerifyEmailContent() {
     const router = useRouter();
     const searchParams = useSearchParams();
     const email = searchParams.get("email");
     const [sendEmailVerificationAgain, { isLoading: sendingLink }] = useSendVerificationLinkAgainMutation();
     const dispatch = useAppDispatch();
+
     const handleLinkResend = async () => {
         try {
             const response = await sendEmailVerificationAgain({ email: email || "" }).unwrap();
@@ -26,8 +89,7 @@ export default function VerifyEmail() {
                     autoTime: true,
                 }),
             );
-        }
-        catch (e: any) {
+        } catch (e: any) {
             dispatch(
                 showToast({
                     message: e?.data?.message || "Unable to send link. Try again later",
@@ -36,26 +98,44 @@ export default function VerifyEmail() {
                 }),
             );
         }
-    }
+    };
 
     return (
         <Box className="max-w-[520px] mx-auto flex flex-col gap-3 items-center text-center">
-            <Image src={"/assets/images/verify-email.png"} alt='' width={180} height={140} />
-            <h1 className='text-[24px] lg:text-[32px] leading-[120%] font-bold mb-4'>Verify your email to
-                get the fun started</h1>
-            {/* <Typography variant="h1" className='font-[700]'></Typography> */}
-            <p className='text-[14px] leading-[120%] font-normal lg:text-[16px] mb-4'>Check the link sent to <strong className='underline text-secondary'>{email}</strong> to activate your account.</p>
-            {/* <p className='text-[14px] leading-[120%] font-normal lg:text-[16px] mb-4'>Check your email for verification link.</p> */}
-            <Button fullWidth size="large" type="submit" variant="contained" color="primary" className='!mb-6' onClick={() => {
-                router.replace(PATH.DASHBOARD.ROOT)
-            }}>
+            <Image src="/assets/images/verify-email.png" alt="" width={180} height={140} />
+            <h1 className="text-[24px] lg:text-[32px] leading-[120%] font-bold mb-4">
+                Verify your email to get the fun started
+            </h1>
+            <p className="text-[14px] leading-[120%] font-normal lg:text-[16px] mb-4">
+                Check the link sent to <strong className="underline text-secondary">{email}</strong> to activate your account.
+            </p>
+            <Button
+                fullWidth
+                size="large"
+                type="submit"
+                variant="contained"
+                color="primary"
+                className="!mb-6"
+                onClick={() => router.replace(PATH.DASHBOARD.ROOT)}
+            >
                 Verify now
             </Button>
-            <h2 className='text-[20px] lg:text-[28px] leading-[120%] font-bold'>Don’t see the email?</h2>
-            <p className='text-[11px] lg:text-[14px] leading-[150%] font-normal'>Please check <strong>your spam or junk folder,</strong> as the email may have been filtered there. Also, ensure that the email address you entered is correct. Still not found?</p>
+            <h2 className="text-[20px] lg:text-[28px] leading-[120%] font-bold">Don’t see the email?</h2>
+            <p className="text-[11px] lg:text-[14px] leading-[150%] font-normal">
+                Please check <strong>your spam or junk folder,</strong> as the email may have been filtered there. Also, ensure that
+                the email address you entered is correct. Still not found?
+            </p>
             <Button fullWidth variant="contained" color="secondary" onClick={handleLinkResend}>
-                {sendingLink ? "Sending Again" : "Send Again"}
+                {sendingLink ? "Sending Again..." : "Send Again"}
             </Button>
         </Box>
-    )
+    );
+}
+
+export default function VerifyEmail() {
+    return (
+        <Suspense fallback={<div>Loading...</div>}>
+            <VerifyEmailContent />
+        </Suspense>
+    );
 }