sij/khoj
1
0
Fork 0
mirror of https://github.com/khoj-ai/khoj.git synced 2024-11-27 09:25:06 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Add a simple badget to the dropdown menu that shows subscription status

Browse source
This commit is contained in:
sabaimran 2024-10-30 13:00:16 -07:00
parent 2b2564257e
commit b63fbc5345
1 changed files with 15 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/interface/web/app/components/navMenu/navMenu.tsx
View file

@ -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" />