adding more coming soon

app/(app)/_layout/BottomNav.tsx

@@ -5,6 +5,12 @@ import {
   RiQuestionAnswerFill,
 } from "react-icons/ri";
 import { cn } from "@/lib/utils";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 
 export default function BottomNav() {
   const navigationItems = [
@@ -13,36 +19,66 @@ export default function BottomNav() {
       name: "home",
       icon: RiHome6Fill,
       current: true,
+      active: true,
     },
     {
       href: "",
       name: "explore",
       icon: RiCompass3Fill,
       current: false,
+      active: false,
     },
     {
       href: "",
       name: "messages",
       icon: RiQuestionAnswerFill,
       current: false,
+      active: false,
     },
   ];
   return (
     <footer className="z-header- flex h-[var(--bottom-nav-height)] w-full bg-background sm:hidden">
       <div className="fixed inset-x-0 bottom-0 flex h-[var(--bottom-nav-height)] flex-1 items-center justify-between border-t bg-background px-4">
-        {navigationItems.map((item) => (
-          <Link href={item.href} className="center group group flex-1">
-            <item.icon
-              className={cn(
-                item.current
-                  ? "text-foreground"
-                  : "text-muted-foreground group-hover:text-foreground",
-                "h-6 w-6 shrink-0",
-              )}
-              aria-hidden="true"
-            />
-          </Link>
-        ))}
+        {navigationItems.map((item) => {
+          if (item.active) {
+            return (
+              <Link href={item.href} className="center group flex-1">
+                <item.icon
+                  className={cn(
+                    item.current
+                      ? "text-foreground"
+                      : "text-muted-foreground group-hover:text-foreground",
+                    "h-6 w-6 shrink-0",
+                  )}
+                  aria-hidden="true"
+                />
+              </Link>
+            );
+          } else {
+            return (
+              <TooltipProvider key={item.name}>
+                <Tooltip delayDuration={100}>
+                  <TooltipTrigger className="center group flex-1">
+                    <div className="center group flex-1">
+                      <item.icon
+                        className={cn(
+                          item.current
+                            ? "text-foreground"
+                            : "text-muted-foreground group-hover:text-foreground",
+                          "h-6 w-6 shrink-0",
+                        )}
+                        aria-hidden="true"
+                      />
+                    </div>
+                  </TooltipTrigger>
+                  <TooltipContent align="center">
+                    <p>Coming Soon</p>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            );
+          }
+        })}
         <div className="standalone:block hidden h-[20px] w-full"></div>
       </div>
     </footer>