From b63fbc5345abfc9bf1d0cb611da3dc013905af1a Mon Sep 17 00:00:00 2001
From: sabaimran <narmiabas@gmail.com>
Date: Wed, 30 Oct 2024 13:00:16 -0700
Subject: [PATCH] Add a simple badget to the dropdown menu that shows
 subscription status

---
 .../web/app/components/navMenu/navMenu.tsx      | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/interface/web/app/components/navMenu/navMenu.tsx b/src/interface/web/app/components/navMenu/navMenu.tsx
index 2ff4eaf4..256c7d77 100644
--- a/src/interface/web/app/components/navMenu/navMenu.tsx
+++ b/src/interface/web/app/components/navMenu/navMenu.tsx
@@ -26,6 +26,17 @@ import { Moon, Sun, UserCircle, Question, GearFine, ArrowRight } from "@phosphor
 import { KhojAgentLogo, KhojAutomationLogo, KhojSearchLogo } from "../logo/khojLogo";
 import { useIsMobileWidth } from "@/app/common/utils";
 
+function SubscriptionBadge({ is_active }: { is_active: boolean }) {
+    return (
+        <div className="flex flex-row items-center">
+            <div
+                className={`w-3 h-3 rounded-full ${is_active ? "bg-yellow-500" : "bg-muted"} mr-1`}
+            ></div>
+            <p className="text-xs">{is_active ? "Futurist" : "Free"}</p>
+        </div>
+    );
+}
+
 export default function NavMenu() {
     const userData = useAuthenticatedData();
     const [darkMode, setDarkMode] = useState(false);
@@ -85,8 +96,9 @@ export default function NavMenu() {
                     </DropdownMenuTrigger>
                     <DropdownMenuContent className="gap-2">
                         <DropdownMenuItem className="w-full">
-                            <div className="flex flex-rows">
+                            <div className="flex flex-col">
                                 <p className="font-semibold">{userData?.email}</p>
+                                <SubscriptionBadge is_active={userData?.is_active ?? false} />
                             </div>
                         </DropdownMenuItem>
                         <DropdownMenuSeparator />
@@ -192,8 +204,9 @@ export default function NavMenu() {
                         </MenubarTrigger>
                         <MenubarContent align="end" className="rounded-xl gap-2">
                             <MenubarItem className="w-full">
-                                <div className="flex flex-rows">
+                                <div className="flex flex-col">
                                     <p className="font-semibold">{userData?.email}</p>
+                                    <SubscriptionBadge is_active={userData?.is_active ?? false} />
                                 </div>
                             </MenubarItem>
                             <MenubarSeparator className="dark:bg-white height-[2px] bg-black" />