Add command palette & cleanup

2022-10-08 16:44:07 +10:30
parent 9e331de44e
commit beba475864
19 changed files with 552 additions and 94 deletions
@@ -0,0 +1,42 @@
+import type React from "react";
+import { Fragment } from "react";
+
+import { Transition } from "@headlessui/react";
+
+export interface PaletteTransitionProps {
+  children: React.ReactNode;
+}
+
+export const PaletteTransition = ({
+  children,
+}: PaletteTransitionProps): JSX.Element => {
+  return (
+    <>
+      <Transition.Child
+        as={Fragment}
+        enter="ease-out duration-300"
+        enterFrom="opacity-0"
+        enterTo="opacity-100"
+        leave="ease-in duration-200"
+        leaveFrom="opacity-100"
+        leaveTo="opacity-0"
+      >
+        <div className="fixed inset-0 bg-gray-500 bg-opacity-25 transition-opacity" />
+      </Transition.Child>
+
+      <div className="fixed inset-0 z-10 overflow-y-auto p-4 sm:p-6 md:p-20">
+        <Transition.Child
+          as={Fragment}
+          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"
+        >
+          {children}
+        </Transition.Child>
+      </div>
+    </>
+  );
+};