Add GitHub Sponsors button to the docs navbar

components/docs-shell.tsx

@@ -12,6 +12,7 @@ import { usePathname } from "next/navigation"
 
 import { DocsSidebar } from "@/components/docs-sidebar"
 import { DocsSidebarTrigger } from "@/components/docs-sidebar-trigger"
+import { GithubSponsor } from "@/components/github-sponsor"
 import { GithubStars } from "@/components/github-stars"
 import { Logo } from "@/components/logo"
 import { SearchTrigger } from "@/components/search-trigger"
@@ -177,16 +178,13 @@ export function DocsShell({
           </SidebarContent>
         </Sidebar>
         <SidebarInset className="min-h-0 min-w-0 overflow-hidden">
-          <header className="flex h-14 min-w-0 shrink-0 border-b">
-            <div className="flex min-w-0 flex-1 items-center gap-1 px-4">
-              <DocsSidebarTrigger showWhenCollapsed />
-              <div className="min-w-0 flex-1" />
-              <GithubStars stars={githubStars} className="shrink-0" />
-              <ThemeToggle />
-            </div>
-            <div className="flex w-56 shrink-0 items-center border-l px-2">
-              <SearchTrigger />
-            </div>
+          <header className="flex h-14 min-w-0 shrink-0 items-center gap-1 border-b px-4">
+            <DocsSidebarTrigger showWhenCollapsed />
+            <div className="min-w-0 flex-1" />
+            <GithubSponsor className="shrink-0" />
+            <GithubStars stars={githubStars} className="shrink-0" />
+            <SearchTrigger />
+            <ThemeToggle />
           </header>
           <div className="relative min-h-0 flex-1 overflow-hidden">
             <div

components/github-sponsor.tsx

@@ -0,0 +1,22 @@
+import { RiHeart3Line } from "@remixicon/react"
+
+import { getGithubSponsorUrl } from "@/lib/github"
+import { cn } from "@/lib/utils"
+
+export function GithubSponsor({ className }: { className?: string }) {
+  return (
+    <a
+      href={getGithubSponsorUrl()}
+      target="_blank"
+      rel="noreferrer"
+      aria-label="Sponsor on GitHub"
+      className={cn(
+        "inline-flex h-8 items-center gap-1.5 rounded-xl px-2.5 text-sm text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground",
+        className
+      )}
+    >
+      <RiHeart3Line className="size-4" />
+      <span className="hidden sm:inline">Sponsor</span>
+    </a>
+  )
+}

components/search-trigger.tsx

@@ -1,19 +1,14 @@
 "use client"
 
-import { useEffect, useState } from "react"
 import { Dialog } from "@base-ui/react/dialog"
 import { useSearchContext } from "fumadocs-ui/contexts/search"
 import { RiSearchLine } from "@remixicon/react"
 
+import { buttonVariants } from "@/components/ui/button"
 import { cn } from "@/lib/utils"
 
 export function SearchTrigger({ className }: { className?: string }) {
-  const { enabled, dialogHandle, hotKey } = useSearchContext()
-  const [mounted, setMounted] = useState(false)
-
-  useEffect(() => {
-    setMounted(true)
-  }, [])
+  const { enabled, dialogHandle } = useSearchContext()
 
   if (!enabled) return null
 
@@ -22,27 +17,13 @@ export function SearchTrigger({ className }: { className?: string }) {
       handle={dialogHandle}
       type="button"
       className={cn(
-        "flex h-8 w-full min-w-0 items-center gap-2 rounded-2xl bg-input/50 px-2.5 text-sm text-muted-foreground outline-none transition-[color,box-shadow] hover:text-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/30",
+        buttonVariants({ variant: "ghost", size: "icon-sm" }),
+        "text-muted-foreground hover:text-foreground",
         className
       )}
       aria-label="Open search"
     >
-      <RiSearchLine className="size-4 shrink-0" />
-      <span className="min-w-0 flex-1 truncate text-left">Search</span>
-      {mounted ? (
-        <span className="hidden shrink-0 items-center gap-0.5 sm:inline-flex">
-          {hotKey.map((k, i) => (
-            <kbd
-              key={i}
-              className="rounded-md bg-muted px-1.5 py-px font-sans text-[11px] font-medium text-muted-foreground"
-            >
-              {k.display}
-            </kbd>
-          ))}
-        </span>
-      ) : (
-        <span className="hidden h-[18px] w-14 shrink-0 sm:inline-flex" />
-      )}
+      <RiSearchLine />
     </Dialog.Trigger>
   )
 }

lib/github.ts

@@ -1,9 +1,14 @@
 const REPO = "radiumcoders/23rd.dev"
+const OWNER = REPO.split("/")[0]
 
 export function getGithubRepoUrl() {
   return `https://github.com/${REPO}`
 }
 
+export function getGithubSponsorUrl() {
+  return `https://github.com/sponsors/${OWNER}`
+}
+
 export function formatStarCount(count: number) {
   return new Intl.NumberFormat("en", {
     notation: "compact",