From 1603b1c37ee9dba6c82f6d79305e7db8fac4a199 Mon Sep 17 00:00:00 2001
From: Motormary <mat.moen@gmail.com>
Date: Sat, 22 Jun 2024 21:54:40 +0200
Subject: [PATCH] ctrl+k for global command search

---
 apps/www/src/app/layout.tsx                |  2 ++
 apps/www/src/components/command-window.tsx | 34 ++++++++++++++++++++++
 packages/ui/src/components/command.tsx     |  2 +-
 3 files changed, 37 insertions(+), 1 deletion(-)
 create mode 100644 apps/www/src/components/command-window.tsx

diff --git a/apps/www/src/app/layout.tsx b/apps/www/src/app/layout.tsx
index 076a3d8f..89c46865 100644
--- a/apps/www/src/app/layout.tsx
+++ b/apps/www/src/app/layout.tsx
@@ -11,6 +11,7 @@ import { Analytics } from "@/components/analytics";
 import { ModalProvider } from "@/components/modal-provider";
 import { Providers } from "@/components/providers";
 import { TailwindIndicator } from "@/components/tailwind-indicator";
+import GlobalSearch from "@/components/command-window"
 
 interface RootLayoutProps {
   children: React.ReactNode;
@@ -83,6 +84,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
           <ModalProvider />
           <TailwindIndicator />
         </Providers>
+        <GlobalSearch/> 
       </body>
     </html>
   );
diff --git a/apps/www/src/components/command-window.tsx b/apps/www/src/components/command-window.tsx
new file mode 100644
index 00000000..2799cbbd
--- /dev/null
+++ b/apps/www/src/components/command-window.tsx
@@ -0,0 +1,34 @@
+"use client"
+
+import { CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@dingify/ui/components/command"
+import Link from "next/link"
+import { useEffect, useState } from "react"
+
+export default function GlobalSearch() {
+    const [open, setOpen] = useState(false)
+ 
+    useEffect(() => {
+      const down = (e: KeyboardEvent) => {
+        if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+          e.preventDefault()
+          setOpen((open) => !open)
+        }
+      }
+      document.addEventListener("keydown", down)
+      return () => document.removeEventListener("keydown", down)
+    }, [])
+   
+    return (
+      <CommandDialog open={open} onOpenChange={setOpen}>
+        <CommandInput placeholder="Type a command or search..." />
+        <CommandList>
+          <CommandEmpty>No results found.</CommandEmpty>
+          <CommandGroup heading="Suggestions">
+            <CommandItem><Link className="w-full" href="/property">Eiendommer</Link></CommandItem>
+            <CommandItem><Link className="w-full" href="/tenant">Leietakere</Link></CommandItem>
+            <CommandItem><Link className="w-full" href="/analytics">Analyser</Link></CommandItem>
+          </CommandGroup>
+        </CommandList>
+      </CommandDialog>
+    )
+}
\ No newline at end of file
diff --git a/packages/ui/src/components/command.tsx b/packages/ui/src/components/command.tsx
index f8eb175a..29705799 100644
--- a/packages/ui/src/components/command.tsx
+++ b/packages/ui/src/components/command.tsx
@@ -28,7 +28,7 @@ type CommandDialogProps = DialogProps;
 const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
   return (
     <Dialog {...props}>
-      <DialogContent className="overflow-hidden p-0 shadow-2xl">
+      <DialogContent className="overflow-hidden p-0 shadow-2xl z-[9999]">
         <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
           {children}
         </Command>