-
-
Notifications
You must be signed in to change notification settings - Fork 10
/
command.tsx
64 lines (62 loc) 路 1.76 KB
/
command.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
import clsx from "clsx";
import { Fragment } from "react";
import { Dialog, Combobox, Transition } from "@headlessui/react";
import { CommandProps } from "../interfaces/commandInterface";
const Command = ({
open,
afterLeave,
onClose,
overlayClassName,
commandFunction,
className,
children
}: CommandProps) => {
return (
<Transition.Root
show={open}
as={Fragment}
afterLeave={afterLeave}
>
<Dialog
onClose={onClose}
className="fixed inset-0 p-5 pt-[25vh] overflow-y-auto mx-auto max-w-xl h-screen"
>
<Transition.Child
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Dialog.Overlay
className={clsx(
`fixed inset-0`,
overlayClassName ?? "bg-gray-200/60 dark:bg-zinc-900/60"
)}
/>
</Transition.Child>
<Transition.Child
enter="ease-out duration-300"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<Combobox
as="div"
onChange={commandFunction}
className={clsx(
`relative max-w-xl mx-auto overflow-hidden rounded-md shadow-2xl`,
className ?? "bg-white dark:bg-zinc-900 dark:ring-zinc-900/5 border border-neutral-300 dark:border-neutral-800"
)}
>
{children}
</Combobox>
</Transition.Child>
</Dialog>
</Transition.Root>
);
};
export default Command;