Skip to content

Commit 6520b64

Browse files
json-qjson-q
committed
feat: add search dialog
1 parent 91ee605 commit 6520b64

File tree

8 files changed

+298
-54
lines changed

8 files changed

+298
-54
lines changed

‎app/about/page.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { MH1 } from '~/components/markdown/m-typography';
2+
13
export default function AboutPage() {
2-
return <>AboutPage Page</>;
4+
return <MH1 className="my-8">About: 页面建设中...</MH1>;
35
}

‎app/favicon.ico‎

40.7 KB
Binary file not shown.

‎app/page.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { MH1 } from '~/components/markdown/m-typography';
2+
13
export default function Home() {
2-
return <div>0000</div>;
4+
return <MH1 className="my-8">Home: 页面建设中...</MH1>;
35
}

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

Lines changed: 29 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,39 @@
11
'use client';
22
import { useState } from 'react';
33
import { Button } from '~/components/ui/button';
4+
import {
5+
Dialog,
6+
DialogContent,
7+
DialogDescription,
8+
DialogHeader,
9+
DialogTitle,
10+
DialogTrigger,
11+
} from '~/components/ui/dialog';
412

513
export default function CommandMenu() {
614
const [, setOpen] = useState(false);
715

816
return (
9-
<Button
10-
variant="outline"
11-
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"
12-
onClick={() => setOpen(true)}
13-
>
14-
<span className="inline-flex">Try Search</span>
15-
<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">
16-
<span className="text-xs">⌘</span>K
17-
</kbd>
18-
</Button>
17+
<Dialog>
18+
<DialogTrigger asChild>
19+
<Button
20+
variant="outline"
21+
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"
22+
onClick={() => setOpen(true)}
23+
>
24+
<span className="inline-flex">Try Search</span>
25+
<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">
26+
<span className="text-xs">⌘</span>K
27+
</kbd>
28+
</Button>
29+
</DialogTrigger>
30+
<DialogContent>
31+
<DialogHeader>
32+
<DialogTitle></DialogTitle>
33+
<DialogDescription>功能开发中.....</DialogDescription>
34+
</DialogHeader>
35+
<div className="h-20"></div>
36+
</DialogContent>
37+
</Dialog>
1938
);
2039
}

‎components/ui/dialog.tsx‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
'use client';
2+
3+
import * as React from 'react';
4+
import * as DialogPrimitive from '@radix-ui/react-dialog';
5+
import { X } from 'lucide-react';
6+
7+
import { cn } from '~/lib/utils';
8+
9+
const Dialog = DialogPrimitive.Root;
10+
11+
const DialogTrigger = DialogPrimitive.Trigger;
12+
13+
const DialogPortal = DialogPrimitive.Portal;
14+
15+
const DialogClose = DialogPrimitive.Close;
16+
17+
const DialogOverlay = React.forwardRef<
18+
React.ElementRef<typeof DialogPrimitive.Overlay>,
19+
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
20+
>(({ className, ...props }, ref) => (
21+
<DialogPrimitive.Overlay
22+
ref={ref}
23+
className={cn(
24+
'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
25+
className,
26+
)}
27+
{...props}
28+
/>
29+
));
30+
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
31+
32+
const DialogContent = React.forwardRef<
33+
React.ElementRef<typeof DialogPrimitive.Content>,
34+
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
35+
>(({ className, children, ...props }, ref) => (
36+
<DialogPortal>
37+
<DialogOverlay />
38+
<DialogPrimitive.Content
39+
ref={ref}
40+
className={cn(
41+
'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
42+
className,
43+
)}
44+
{...props}
45+
>
46+
{children}
47+
<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">
48+
<X className="h-4 w-4" />
49+
<span className="sr-only">Close</span>
50+
</DialogPrimitive.Close>
51+
</DialogPrimitive.Content>
52+
</DialogPortal>
53+
));
54+
DialogContent.displayName = DialogPrimitive.Content.displayName;
55+
56+
const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
57+
<div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />
58+
);
59+
DialogHeader.displayName = 'DialogHeader';
60+
61+
const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
62+
<div
63+
className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
64+
{...props}
65+
/>
66+
);
67+
DialogFooter.displayName = 'DialogFooter';
68+
69+
const DialogTitle = React.forwardRef<
70+
React.ElementRef<typeof DialogPrimitive.Title>,
71+
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
72+
>(({ className, ...props }, ref) => (
73+
<DialogPrimitive.Title
74+
ref={ref}
75+
className={cn('text-lg font-semibold leading-none tracking-tight', className)}
76+
{...props}
77+
/>
78+
));
79+
DialogTitle.displayName = DialogPrimitive.Title.displayName;
80+
81+
const DialogDescription = React.forwardRef<
82+
React.ElementRef<typeof DialogPrimitive.Description>,
83+
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
84+
>(({ className, ...props }, ref) => (
85+
<DialogPrimitive.Description
86+
ref={ref}
87+
className={cn('text-sm text-muted-foreground', className)}
88+
{...props}
89+
/>
90+
));
91+
DialogDescription.displayName = DialogPrimitive.Description.displayName;
92+
93+
export {
94+
Dialog,
95+
DialogPortal,
96+
DialogOverlay,
97+
DialogTrigger,
98+
DialogClose,
99+
DialogContent,
100+
DialogHeader,
101+
DialogFooter,
102+
DialogTitle,
103+
DialogDescription,
104+
};

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
"prepare": "husky"
1515
},
1616
"dependencies": {
17+
"@radix-ui/react-dialog": "^1.1.6",
1718
"@radix-ui/react-dropdown-menu": "^2.1.6",
1819
"@radix-ui/react-slot": "^1.1.2",
1920
"class-variance-authority": "^0.7.1",

‎pnpm-lock.yaml‎

Lines changed: 38 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)