chore: Sync package version v1.15.0

components/DocSearch.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import React from "react";
+import { DocSearch } from "@docsearch/react";
+import "@docsearch/css";
+
+export default function DocSearchComponent() {
+  const appId = process.env.NEXT_PUBLIC_ALGOLIA_DOCSEARCH_APP_ID;
+  const apiKey = process.env.NEXT_PUBLIC_ALGOLIA_DOCSEARCH_API_KEY;
+  const indexName = process.env.NEXT_PUBLIC_ALGOLIA_DOCSEARCH_INDEX_NAME;
+
+  if (!appId || !apiKey || !indexName) {
+    console.error(
+      "DocSearch credentials are not set in the environment variables."
+    );
+    return (
+      <button className="text-sm text-muted-foreground" disabled>
+        Search... (misconfigured)
+      </button>
+    );
+  }
+
+  return (
+    <div className="docsearch">
+      <DocSearch
+        appId={appId}
+        apiKey={apiKey}
+        indexName={indexName}
+        placeholder="Type something to search..."
+      />
+    </div>
+  );
+}

components/navbar.tsx

@@ -26,7 +26,7 @@ export function Navbar() {
               <NavMenu />
             </div>
             <Separator className="hidden lg:flex my-4 h-9" orientation="vertical" />
-            <Search />
+            <Search type="algolia" />
         </div>
       </div>
     </nav>

components/search.tsx

@@ -4,11 +4,12 @@ import { useState, useEffect } from "react";
 import { Dialog } from "@/components/ui/dialog";
 import { SearchTrigger } from "@/components/SearchTrigger";
 import { SearchModal } from "@/components/SearchModal";
+import DocSearchComponent from "@/components/DocSearch";
+import { DialogTrigger } from "@radix-ui/react-dialog";
 
-// Define props for the Search component
 interface SearchProps {
   /**
-   * Specify the type of search engine to use.
+   * Specify which search engine to use.
    * @default 'default'
    */
   type?: "default" | "algolia";
@@ -17,33 +18,36 @@ interface SearchProps {
 export default function Search({ type = "default" }: SearchProps) {
   const [isOpen, setIsOpen] = useState(false);
 
-  // Effect to handle keyboard shortcut (Cmd/Ctrl + K)
+  // The useEffect below is ONLY for the 'default' type, which is correct.
+  // DocSearch handles its own keyboard shortcut.
   useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if ((event.ctrlKey || event.metaKey) && event.key === "k") {
-        event.preventDefault();
-        setIsOpen((open) => !open);
-      }
-    };
+    if (type === 'default') {
+      const handleKeyDown = (event: KeyboardEvent) => {
+        if ((event.ctrlKey || event.metaKey) && event.key === "k") {
+          event.preventDefault();
+          setIsOpen((open) => !open);
+        }
+      };
 
-    window.addEventListener("keydown", handleKeyDown);
-    return () => {
-      window.removeEventListener("keydown", handleKeyDown);
-    };
-  }, []);
+      window.addEventListener("keydown", handleKeyDown);
+      return () => {
+        window.removeEventListener("keydown", handleKeyDown);
+      };
+    }
+  }, [type]);
 
-  // Here you can add logic for different search types if needed in the future
   if (type === "algolia") {
-    // return <AlgoliaSearchComponent />; // Example for future implementation
-    console.warn("Tipe pencarian 'algolia' belum diimplementasikan.");
-    // For now, we will fall back to the default search implementation
+    // Just render the component without passing any state props
+    return <DocSearchComponent />;
   }
 
-  // Render the default search components
+  // Logic for 'default' search
   return (
     <div>
       <Dialog open={isOpen} onOpenChange={setIsOpen}>
-        <SearchTrigger />
+        <DialogTrigger asChild>
+          <SearchTrigger />
+        </DialogTrigger>
         <SearchModal isOpen={isOpen} setIsOpen={setIsOpen} />
       </Dialog>
     </div>