Implemented load more functionality and global modal provider

app/Categories/page.tsx

@@ -1,5 +1,4 @@
 import Stores from "@/components/stores";
-import { Button } from "@/components/ui/button";
 
 const Category = () => {
   return (
@@ -11,11 +10,7 @@ const Category = () => {
       </div>
       {/* <SeperatorHeading label="Trending Deals"/> */}
       <Stores />
-      <div className="flex items-center justify-center flex-col px-20">
-        <Button className="rounded-full bg-customTeal dark:bg-Green h-10 w-40 flex items-center justify-center text-lg m-10">
-          Load more
-        </Button>
-      </div>
+
     </div>
   );
 };

app/Teams/page.tsx

@@ -1,10 +1,7 @@
 
-import UnderConstruction from "@/components/ui/underConstruction";
-
 const Teams = () => {
   return (
-    <UnderConstruction/>
-
+    <></>
     // <div className="h-full pb-20  dark:bg-DarkGray">
     //   <div className="h-full">
     //     <div className="text-white flex items-center justify-center  bg-customTeal dark:bg-gradient-to-r from-Green to-Yellow h-full mb-20 p-24">

components/main-nav.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { cn } from "@/lib/utils";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
@@ -9,16 +9,27 @@ import { Heart, ShoppingCart } from "lucide-react"; // Import any required icons
 import { Menu, X } from "lucide-react"; // Icons for hamburger menu
 import { ModeToggle } from "./ui/themeButton";
 import AuthButtons from "./authButtons";
+import { useConstruction } from "@/context/modalContext";
 
 interface MainNavProps{
   className?:React.HTMLAttributes<HTMLElement>
   theme:string
 }
 
+
 export function MainNav({ className,theme }:MainNavProps) {
+
+  const [loading,setLoading]=useState(true);
+  const {openDialog}=useConstruction();
   const pathname = usePathname();
   const [isOpen, setIsOpen] = useState(false); // State to toggle mobile menu visibility
 
+  useEffect(()=>{
+    setLoading(false);
+  },[])
+
+  if(loading) return null;
+
   const toggleMenu = () => setIsOpen(!isOpen); // Toggle function for menu
 
   const routes = [
@@ -29,7 +40,12 @@ export function MainNav({ className,theme }:MainNavProps) {
       label: "Categories",
       active: pathname.startsWith(`/Categories`),
     },
-    { href: `/Teams`, label: "Teams", active: pathname.startsWith(`/Teams`) },
+    { href: `#`, label: "Teams", active: pathname.startsWith(`/Teams`),
+      onClick: (e: React.MouseEvent) => {
+        e.preventDefault();
+        openDialog(); 
+      },
+     },
     { href: `/Blog`, label: "Blog", active: pathname.startsWith(`/Blog`) },
     {
       href: `/MyOrders`,
@@ -79,6 +95,7 @@ export function MainNav({ className,theme }:MainNavProps) {
               route.active ?`${theme==='dark'?'text-gray-500':'text-customTeal'}`:`${theme==='dark'?'text-gray-200':'text-customBlue'}`,
               theme=='dark'? `${'hover:text-gray-500'}`:`${'hover:text-customTeal'}`
             )}
+            onClick={route.onClick}
           >
             {route.logo && <span>{route.logo}</span>}
             {route.label}
@@ -108,7 +125,10 @@ export function MainNav({ className,theme }:MainNavProps) {
               route.active ?`${theme==='dark'?'text-gray-200':'text-customTeal'}`:`${theme==='dark'?'text-gray-200':'text-customBlue'}`,
               theme=='dark'? `${'hover:text-gray-500'}`:`${'hover:text-customTeal'}`
             )}
-            onClick={toggleMenu} // Close menu on link click
+            onClick={(e) => {
+              toggleMenu(); // Close menu on link click
+              if (route.onClick) route.onClick(e); // Call route's onClick if it exists
+            }}// Close menu on link click
           >
             {route.logo && <span>{route.logo}</span>}
             {route.label}

components/navbar.tsx

@@ -3,6 +3,7 @@ import Image from "next/image";
 import Link from "next/link";
 import { MainNav } from "./main-nav";
 import { useTheme } from "@/context/themeProvider";
+import UnderConstructionAlert from "./ui/underConstruction";
 // import { useTheme } from "@/context/ThemeContext"; // Import your theme context
 
 const Navbar = () => {
@@ -31,7 +32,7 @@ const Navbar = () => {
         {/* all the navigation links */}
         <MainNav theme={theme}/>
 
-
+       <UnderConstructionAlert theme={theme}/>
       </div>
     </div>
   );