add algolia

app/components/DocSearch.jsx

@@ -0,0 +1,15 @@
+'use client'
+import { DocSearch } from '@docsearch/react';
+
+import '@docsearch/css';
+
+function App() {
+    return (
+        <DocSearch
+            appId="FGZELRBIJJ"
+            indexName="xiaogenban1993"
+            apiKey="3419620c268293f17f15d16b4f80d6c4"
+        />
+    );
+}
+export default App;

app/components/navbar-menu.jsx

@@ -4,6 +4,7 @@ import { motion } from "framer-motion";
 import Link from "next/link";
 import Image from "next/image";
 import { cn } from "./cn";
+import DocSearch from '@/app/components/DocSearch'
 
 const transition = {
     type: "spring",
@@ -115,16 +116,23 @@ export default function Navbar({ className }) {
     const [active, setActive] = React.useState(null);
     return (
         <div
-            className={cn("fixed top-10 inset-x-0 max-w-[20rem] mx-auto z-50", className)}
+            className={cn("fixed top-10 inset-x-0 max-w-[25rem] mx-auto z-50", className)}
         >
             <Menu setActive={setActive}>
                 <MenuItem setActive={setActive} active={active} item={<span><a href="/">首页</a></span>}>
                 </MenuItem>
                 <MenuItem setActive={setActive} active={active} item={
                     <span>
                         <a href="https://github.com/sunwu51/notebook"><Image src="/github-mark-white.png" width={16} height={16} /></a>
-                    </span>}></MenuItem>
+                    </span>}>
+                </MenuItem>
+                <div style={{
+                    position: 'relative',
+                    right: '-30px'
+                }}>
+                    <DocSearch />
+                </div>
             </Menu>
-        </div>
+        </div >
     );
 }

app/layout.js

@@ -1,5 +1,6 @@
 import { Inter } from "next/font/google";
 import NavBar from "@/app/components/navbar-menu";
+import DocSearch from "@/app/components/DocSearch"
 import "./globals.css";
 import "./prism-dracula.css";
 

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@chakra-ui/react": "^2.8.2",
+    "@docsearch/react": "^3.6.0",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@giscus/react": "^3.0.0",