Breadcrumb now has an upgrade prompt and button

apps/webapp/app/components/billing/UpgradePrompt.tsx

@@ -0,0 +1,27 @@
+import { ArrowUpCircleIcon } from "@heroicons/react/24/outline";
+import { LinkButton } from "../primitives/Buttons";
+import { Paragraph } from "../primitives/Paragraph";
+import { organizationBillingPath } from "~/utils/pathBuilder";
+import { MatchedOrganization } from "~/hooks/useOrganizations";
+
+type UpgradePromptProps = {
+  organization: MatchedOrganization;
+};
+
+export function UpgradePrompt({ organization }: UpgradePromptProps) {
+  return (
+    <div className="flex h-full w-full items-center gap-4 bg-gradient-to-r from-transparent to-indigo-900/50 pr-1.5">
+      <Paragraph variant="extra-small" className="text-rose-500">
+        You have exceded the monthly 10,000 Runs limit
+      </Paragraph>
+      <LinkButton
+        variant={"primary/small"}
+        LeadingIcon={ArrowUpCircleIcon}
+        leadingIconClassName="px-0"
+        to={organizationBillingPath(organization)}
+      >
+        Upgrade
+      </LinkButton>
+    </div>
+  );
+}

apps/webapp/app/routes/_app.orgs.$organizationSlug/route.tsx

@@ -3,6 +3,7 @@ import type { LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { z } from "zod";
 import { RouteErrorDisplay } from "~/components/ErrorDisplay";
+import { UpgradePrompt } from "~/components/billing/UpgradePrompt";
 import { Breadcrumb, BreadcrumbLink } from "~/components/navigation/Breadcrumb";
 import { PageNavigationIndicator } from "~/components/navigation/PageNavigationIndicator";
 import { SideMenu } from "~/components/navigation/SideMenu";
@@ -74,9 +75,12 @@ export default function Organization() {
           organizations={organizations}
         />
         <div className="grid grid-rows-[2.25rem_1fr] overflow-hidden">
-          <div className="flex w-full items-center justify-between border-b border-ui-border pr-2">
+          <div className="flex w-full items-center justify-between border-b border-ui-border">
             <Breadcrumb />
-            <PageNavigationIndicator />
+            <div className="flex h-full items-center gap-4">
+              <PageNavigationIndicator />
+              <UpgradePrompt organization={organization} />
+            </div>
           </div>
           <Outlet />
         </div>