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

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 { KhojAgentLogo, KhojAutomationLogo, KhojSearchLogo } from "../logo/khojLogo";
import { useIsMobileWidth } from "@/app/common/utils"; 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() { export default function NavMenu() {
const userData = useAuthenticatedData(); const userData = useAuthenticatedData();
const [darkMode, setDarkMode] = useState(false); const [darkMode, setDarkMode] = useState(false);
@ -85,8 +96,9 @@ export default function NavMenu() {
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent className="gap-2"> <DropdownMenuContent className="gap-2">
<DropdownMenuItem className="w-full"> <DropdownMenuItem className="w-full">
<div className="flex flex-rows"> <div className="flex flex-col">
<p className="font-semibold">{userData?.email}</p> <p className="font-semibold">{userData?.email}</p>
<SubscriptionBadge is_active={userData?.is_active ?? false} />
</div> </div>
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuSeparator /> <DropdownMenuSeparator />
@ -192,8 +204,9 @@ export default function NavMenu() {
</MenubarTrigger> </MenubarTrigger>
<MenubarContent align="end" className="rounded-xl gap-2"> <MenubarContent align="end" className="rounded-xl gap-2">
<MenubarItem className="w-full"> <MenubarItem className="w-full">
<div className="flex flex-rows"> <div className="flex flex-col">
<p className="font-semibold">{userData?.email}</p> <p className="font-semibold">{userData?.email}</p>
<SubscriptionBadge is_active={userData?.is_active ?? false} />
</div> </div>
</MenubarItem> </MenubarItem>
<MenubarSeparator className="dark:bg-white height-[2px] bg-black" /> <MenubarSeparator className="dark:bg-white height-[2px] bg-black" />