feat: add wip tag to navigation

Author: babblebey

components/main-nav.tsx

@@ -40,14 +40,15 @@ export function MainNav({ items }: MainNavProps) {
                 <a key={index}
                   href={item.disabled ? "#" : item.href}
                   className={cn(
-                    "flex items-center text-lg font-medium transition-colors hover:text-foreground/80 sm:text-sm",
+                    "flex items-center text-lg font-medium transition-colors hover:text-foreground/80 sm:text-sm relative",
                     item.href.startsWith(`/${segment}`)
                       ? "text-foreground"
                       : "text-foreground/60",
                     item.disabled && "cursor-not-allowed opacity-80"
                   )}
                 >
                   {item.title}
+                  {item.wip && <span className="wip">wip</span>}
                 </a>
               ))}
             </nav>

components/mobile-nav.tsx

@@ -28,12 +28,13 @@ export function MobileNav({ items, setShowMobileMenu }: MobileNavProps) {
             <a key={index}
               href={item.disabled ? "#" : item.href}
               className={cn(
-                "flex w-full items-center rounded-md py-2 font-medium hover:underline",
+                "flex w-full items-center rounded-md py-2 font-medium hover:underline relative",
                 item.disabled && "cursor-not-allowed opacity-60"
               )}
               onClick={() => !item.disabled && setShowMobileMenu(false) }
             >
               {item.title}
+              {item.wip && <span className="wip">wip</span>}
             </a>
           ))}
         </nav>

config/nav.ts

@@ -9,7 +9,8 @@ export const navConfig: NavConfig = {
     {
       title: "Blog",
       href: "/blog",
-      disabled: true // Pending Feature Built
+      disabled: true, // Pending Feature Built
+      wip: true
     },
     {
       title: "Tools",

styles/globals.css

@@ -81,4 +81,8 @@ html {
 
 .m-itbey {
   @apply inline-flex gap-1 items-center align-bottom
+}
+
+.wip {
+  @apply text-[0.6rem] absolute bg-red-600 p-1 rounded-sm leading-none top-0 left-4 font-black
 }

types/index.d.ts

@@ -2,6 +2,7 @@ export type NavItem = {
   title: string
   href: string
   disabled?: boolean
+  wip?: boolean
 }
 
 export type MainNavItem = NavItem