Hide upgrade button for paid users.

.astro/types.d.ts

@@ -1,2 +1 @@
 /// <reference types="astro/client" />
-/// <reference path="content.d.ts" />

src/components/Navigation/Navigation.astro

@@ -6,6 +6,7 @@ import { NavigationDropdown } from '../NavigationDropdown';
 import { RoadmapDropdownMenu } from '../TopNavDropdowns/RoadmapDropdownMenu';
 import { AIDropdownMenu } from '../TopNavDropdowns/AIDropdownMenu';
 import { AccountDropdown } from './AccountDropdown';
+import { UpgradeProButton } from '../TopNavDropdowns/UpgradeProButton';
 ---
 
 <div class='bg-slate-900 py-5 text-white sm:py-8'>
@@ -31,13 +32,7 @@ import { AccountDropdown } from './AccountDropdown';
         <NavigationDropdown client:load />
         <RoadmapDropdownMenu client:load />
         <AIDropdownMenu client:load />
-        <a
-          href='/premium'
-          class='group relative hidden items-center gap-1.5 font-medium text-yellow-400 transition-all duration-200 hover:text-yellow-300 xl:flex'
-        >
-          <Icon icon='bolt' />
-          Upgrade to Pro
-        </a>
+        <UpgradeProButton client:only='react' />
       </div>
     </div>
 

src/components/TopNavDropdowns/UpgradeProButton.tsx

@@ -0,0 +1,20 @@
+import { Zap } from 'lucide-react';
+import { useIsPaidUser } from '../../queries/billing';
+import { cn } from '../../lib/classname';
+
+export function UpgradeProButton() {
+  const { isPaidUser, isLoading } = useIsPaidUser();
+
+  return (
+    <a
+      href="/premium"
+      className={cn(
+        'group animate-fade-in relative hidden items-center gap-1.5 font-medium text-yellow-400 transition-all duration-200 hover:text-yellow-300 xl:flex',
+        (isPaidUser || isLoading) && 'hidden!',
+      )}
+    >
+      <Zap className="h-4 w-4 fill-current" />
+      Upgrade to Pro
+    </a>
+  );
+}