From 55182ceb4c271d9dcb6c17690e290355555bea7d Mon Sep 17 00:00:00 2001
From: Rodrigo Perrote <rodrigoperrote@gmail.com>
Date: Thu, 23 May 2024 17:33:31 -0300
Subject: [PATCH] add a artisanal cmdk as shorcut of debug/orchestra

---
 components/debug/index.js            |  8 +++++
 libs/orchestra/cmdk/cmdk.module.scss | 13 ++++++++
 libs/orchestra/cmdk/index.js         | 44 ++++++++++++++++++++++++++++
 3 files changed, 65 insertions(+)
 create mode 100644 libs/orchestra/cmdk/cmdk.module.scss
 create mode 100644 libs/orchestra/cmdk/index.js

diff --git a/components/debug/index.js b/components/debug/index.js
index 74124461..cb012d14 100644
--- a/components/debug/index.js
+++ b/components/debug/index.js
@@ -22,6 +22,13 @@ const GridDebugger = dynamic(
   },
 )
 
+const CMDKDebug = dynamic(
+  () => import('libs/orchestra/cmdk').then(({ CMDKDebug }) => CMDKDebug),
+  {
+    ssr: false,
+  },
+)
+
 export function Debug() {
   const { stats, grid, studio, dev } = useOrchestra()
 
@@ -34,6 +41,7 @@ export function Debug() {
       {studio && <Studio />}
       {stats && <Stats />}
       {grid && <GridDebugger />}
+      <CMDKDebug />
     </>
   )
 }
diff --git a/libs/orchestra/cmdk/cmdk.module.scss b/libs/orchestra/cmdk/cmdk.module.scss
new file mode 100644
index 00000000..9ae2b37f
--- /dev/null
+++ b/libs/orchestra/cmdk/cmdk.module.scss
@@ -0,0 +1,13 @@
+.cmdkContainer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+}
+
+.overlay {
+  background-color: rgba(255, 255, 255, 0.5);
+  width: 100%;
+  height: 100%;
+}
diff --git a/libs/orchestra/cmdk/index.js b/libs/orchestra/cmdk/index.js
new file mode 100644
index 00000000..de59d543
--- /dev/null
+++ b/libs/orchestra/cmdk/index.js
@@ -0,0 +1,44 @@
+'use client'
+import OrchestraPage from 'app/debug/orchestra/page'
+import { useEffect, useState } from 'react'
+import { createPortal } from 'react-dom'
+import s from './cmdk.module.scss'
+
+export const CMDKDebug = () => {
+  const [open, setOpen] = useState(false)
+
+  useEffect(() => {
+    function handleKeyDown(e) {
+      if (
+        ((navigator?.platform?.toLowerCase().includes('mac')
+          ? e.metaKey
+          : e.ctrlKey) &&
+          e.key === 'k') ||
+        (open && e.key === 'Escape')
+      ) {
+        e.preventDefault()
+        e.stopPropagation()
+
+        setOpen((currentValue) => {
+          return !currentValue
+        })
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyDown)
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [open])
+
+  if (!open) return null
+
+  return createPortal(
+    <div className={s.cmdkContainer}>
+      <div className={s.overlay} />
+      <OrchestraPage />
+    </div>,
+    document.body,
+  )
+}