add: feature flag

web/src/components/Navbar.tsx

@@ -22,6 +22,7 @@ import {
 } from "@clerk/nextjs";
 import { Github, Menu } from "lucide-react";
 import meta from "next-gen/config";
+import { useFeatureFlagEnabled } from "posthog-js/react";
 import { useEffect, useState } from "react";
 import { useMediaQuery } from "usehooks-ts";
 
@@ -29,9 +30,13 @@ export function Navbar() {
   const { organization } = useOrganization();
   const _isDesktop = useMediaQuery("(min-width: 1024px)");
   const [isDesktop, setIsDesktop] = useState(true);
+
+  const pricingPlanFlagEnable = useFeatureFlagEnabled("pricing-plan");
+
   useEffect(() => {
     setIsDesktop(_isDesktop);
   }, [_isDesktop]);
+
   return (
     <>
       <div className="flex flex-row items-center gap-4">
@@ -85,6 +90,7 @@ export function Navbar() {
       </div>
       <div className="flex flex-row items-center gap-2">
         {isDesktop && <NavbarMenu />}
+        {pricingPlanFlagEnable && (
           <Button
             asChild
             variant="link"
@@ -92,6 +98,7 @@ export function Navbar() {
           >
             <a href="/pricing">Pricing</a>
           </Button>
+        )}
         <Button
           asChild
           variant="link"
@@ -105,7 +112,11 @@ export function Navbar() {
           variant="outline"
           className="rounded-full aspect-square p-2"
         >
-          <a target="_blank" href="https://github.com/BennyKok/comfyui-deploy" rel="noreferrer">
+          <a
+            target="_blank"
+            href="https://github.com/BennyKok/comfyui-deploy"
+            rel="noreferrer"
+          >
             <Github />
           </a>
         </Button>