feat: add search dialog

Author: json-q

components/layouts/page-header/command-menu.tsx

@@ -1,5 +1,5 @@
 'use client';
-import { useState } from 'react';
+import { File, Search } from 'lucide-react';
 import { Button } from '~/components/ui/button';
 import {
   Dialog,
@@ -9,30 +9,46 @@ import {
   DialogTitle,
   DialogTrigger,
 } from '~/components/ui/dialog';
+import { Input } from '~/components/ui/input';
 
 export default function CommandMenu() {
-  const [, setOpen] = useState(false);
+  // const list = useSearch(searchQuery);
+  // console.log(list);
+
+  const onSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+    console.log(e.target.value);
+  };
 
   return (
     <Dialog>
       <DialogTrigger asChild>
         <Button
           variant="outline"
           className="relative h-8 w-full justify-start rounded-[0.5rem] bg-muted/50 text-sm font-normal text-muted-foreground shadow-none sm:pr-12 md:w-32 lg:w-48 xl:w-56"
-          onClick={() => setOpen(true)}
         >
           <span className="inline-flex">Try Search</span>
           <kbd className="pointer-events-none absolute right-[0.3rem] top-[0.3rem] hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex">
             <span className="text-xs">⌘</span>K
           </kbd>
         </Button>
       </DialogTrigger>
-      <DialogContent>
+      <DialogContent hideCloseIcon className="gap-0 p-0">
+        {/* Header 仅仅防止报错 */}
         <DialogHeader>
-          <DialogTitle></DialogTitle>
-          <DialogDescription>功能开发中.....</DialogDescription>
+          <DialogTitle className="m-0 p-0"></DialogTitle>
+          <DialogDescription className="m-0 p-0"></DialogDescription>
         </DialogHeader>
-        <div className="h-20"></div>
+
+        <div className="flex items-center border-b px-3">
+          <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+          <Input className="border-none focus-visible:ring-0" onChange={onSearch} />
+        </div>
+        <div className="overflow-hidden px-2 py-1 text-foreground">
+          <div className="relative flex cursor-default select-none items-center gap-2 rounded-sm px-4 py-3 outline-none hover:bg-accent hover:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0">
+            <File />
+            oooooo
+          </div>
+        </div>
       </DialogContent>
     </Dialog>
   );

components/ui/dialog.tsx

@@ -31,8 +31,8 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & { hideCloseIcon?: boolean }
+>(({ className, children, hideCloseIcon, ...props }, ref) => (
   <DialogPortal>
     <DialogOverlay />
     <DialogPrimitive.Content
@@ -44,10 +44,12 @@ const DialogContent = React.forwardRef<
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
+      {hideCloseIcon ? null : (
+        <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+          <X className="h-4 w-4" />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      )}
     </DialogPrimitive.Content>
   </DialogPortal>
 ));

components/ui/input.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+import { cn } from '~/lib/utils';
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Input.displayName = 'Input';
+
+export { Input };

hooks/useSearch.ts

@@ -44,6 +44,7 @@
     "@eslint/eslintrc": "^3.2.0",
     "@eslint/js": "^9.20.0",
     "@tailwindcss/typography": "^0.5.16",
+    "@types/flexsearch": "^0.7.6",
     "@types/node": "^22.13.1",
     "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",

package.json

@@ -27,7 +27,7 @@ const POST_DIR = 'post';
  * @property {string} readingTime - 阅读时长
  * @property {number} wordCount - 文章字数
  * @property {string} content - 文章md内容
- * @property {Toc} toc - 目录结构
+ * @property {Toc[]} toc - 目录结构
  */
 
 /**
@@ -183,7 +183,6 @@ function createMDXData(dir) {
           return {
             title: frontMatter.title,
             publishedAt: frontMatter.date,
-            order: Number(frontMatter.order) || 0,
             url: `/${POST_DIR}/${slug}`,
             slug,
             readingTime: readingTime(content).text,