Add delegate google search

WIP

Author: Dan Costello

app/RootProvider.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { RootProvider } from "fumadocs-ui/provider";
+import type { ReactNode, ComponentType } from "react";
+import DefaultSearchDialog from "@/app/components/Search";
+import type { SharedProps } from "@/app/components/SearchDialog";
+
+// Create a wrapper component that satisfies the ComponentType<SharedProps> requirement
+const SearchDialogWrapper: ComponentType<SharedProps> = (props) => {
+  return <DefaultSearchDialog {...props} onSearchChange={() => {}} />;
+};
+
+export default function Root({ children }: { children: ReactNode }) {
+  return (
+    <RootProvider
+      search={{
+        SearchDialog: SearchDialogWrapper,
+      }}
+    >
+      {children}
+    </RootProvider>
+  );
+}

app/components/Search.tsx

@@ -0,0 +1,17 @@
+"use client";
+import type { ReactNode } from "react";
+import { SearchDialog, type SharedProps } from "./SearchDialog";
+
+export interface DefaultSearchDialogProps extends SharedProps {
+  /**
+   * @defaultValue 'static'
+   */
+  type?: "fetch" | "static";
+  onSearchChange?: (value: string) => void;
+}
+
+export default function DefaultSearchDialog({
+  ...props
+}: DefaultSearchDialogProps): ReactNode {
+  return <SearchDialog {...props} />;
+}

app/components/SearchDialog.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import { useCallback, useRef } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogOverlay,
+  DialogTitle,
+} from "@radix-ui/react-dialog";
+
+export interface SharedProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+interface SearchDialogProps extends SharedProps {
+  onSearchChange?: (v: string) => void;
+}
+
+export function SearchDialog({
+  open,
+  onOpenChange,
+  onSearchChange,
+}: SearchDialogProps) {
+  const formRef = useRef<HTMLFormElement>(null);
+
+  const handleSearch = useCallback((query: string) => {
+    // create a new tab and append the search query
+    window.open(
+      `https://www.google.com/search?q=site:userclouds.com${encodeURIComponent(` ${query}`)}`,
+      "_blank",
+    );
+  }, []);
+
+  const handleClose = useCallback(() => {
+    onOpenChange(false);
+    if (formRef.current) {
+      formRef.current.reset();
+    }
+  }, [onOpenChange]);
+
+  const handleSubmit = useCallback(
+    (e: React.FormEvent) => {
+      e.preventDefault();
+      const formData = new FormData(e.target as HTMLFormElement);
+      const query = formData.get("search") as string;
+      if (query) {
+        handleSearch(query);
+        onSearchChange?.(query);
+      }
+    },
+    [handleSearch, onSearchChange],
+  );
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogOverlay className="fixed inset-0 z-50 bg-black/30 backdrop-blur-sm data-[state=closed]:animate-fd-fade-out data-[state=open]:animate-fd-fade-in" />
+      <DialogContent
+        aria-describedby={undefined}
+        className="fixed left-1/2 top-[10vh] z-50 w-[98vw] max-w-screen-sm -translate-x-1/2 rounded-lg border bg-fd-popover text-fd-popover-foreground shadow-lg data-[state=closed]:animate-fd-dialog-out data-[state=open]:animate-fd-dialog-in"
+      >
+        <DialogTitle className="hidden">Search…</DialogTitle>
+        <form
+          ref={formRef}
+          onSubmit={handleSubmit}
+          className="flex flex-row items-center gap-2 px-3"
+        >
+          <input
+            name="search"
+            defaultValue=""
+            placeholder="Search…"
+            onChange={(e) => onSearchChange?.(e.target.value)}
+            className="w-0 flex-1 bg-transparent py-3 text-base placeholder:text-fd-muted-foreground focus-visible:outline-none"
+          />
+          <button
+            type="button"
+            aria-label="Close Search"
+            onClick={handleClose}
+            className="text-xs p-1.5 flex items-center gap-2 "
+          >
+            <kbd className="rounded-md border bg-fd-background p-1.5">Esc</kbd>
+          </button>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

app/layout.tsx

@@ -1,7 +1,7 @@
 import "./global.css";
-import { RootProvider } from "fumadocs-ui/provider";
 import type { ReactNode } from "react";
 import type { Metadata } from "next";
+import RootProvider from "./RootProvider";
 
 export const metadata: Metadata = {
   title: {
@@ -38,13 +38,7 @@ export default function Layout({ children }: { children: ReactNode }) {
   return (
     <html lang="en" suppressHydrationWarning>
       <body className="flex flex-col min-h-screen">
-        <RootProvider
-          search={{
-            enabled: false,
-          }}
-        >
-          {children}
-        </RootProvider>
+        <RootProvider>{children}</RootProvider>
       </body>
     </html>
   );

app/utils/cn.ts

@@ -0,0 +1 @@
+export { twMerge as cn } from "tailwind-merge";

package.json

@@ -13,6 +13,7 @@
     "postinstall": "fumadocs-mdx"
   },
   "dependencies": {
+    "@radix-ui/react-dialog": "^1.1.14",
     "ajv": "^8.17.1",
     "fumadocs-core": "15.4.2",
     "fumadocs-mdx": "11.6.6",
@@ -24,7 +25,8 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "serve": "^14.2.4",
-    "shiki": "^3.4.2"
+    "shiki": "^3.4.2",
+    "tailwind-merge": "^3.3.0"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.8",