Add command k input

src/components/CommandMenu/CommandMenu.tsx

@@ -0,0 +1,67 @@
+import { useState } from 'preact/hooks';
+
+const defaultPages = [
+  { href: '/profile', title: 'Account', group: 'Pages' },
+  { href: '/roadmaps', title: 'Roadmaps', group: 'Pages' },
+  { href: '/best-practices', title: 'Best Practices', group: 'Pages' },
+  { href: '/guides', title: 'Guides', group: 'Pages' },
+  { href: '/videos', title: 'Videos', group: 'Pages' },
+];
+
+export function CommandMenu() {
+  const [isActive, setIsActive] = useState(true);
+  const [pages, setPages] = useState(defaultPages);
+  const [searchedText, setSearchedText] = useState('');
+  const [activeCounter, setActiveCounter] = useState(0);
+
+  if (!isActive) {
+    return null;
+  }
+
+  return (
+    <div className="fixed left-0 right-0 top-0 z-50 flex h-full justify-center overflow-y-auto overflow-x-hidden bg-black/50">
+      <div className="relative top-20 h-full w-full max-w-lg p-2 md:h-auto">
+        <div className="relative rounded-lg bg-white shadow">
+          <input
+            type="text"
+            value={searchedText}
+            class={
+              'w-full rounded-t-md border-b p-4 text-sm focus:bg-gray-50 focus:outline-0'
+            }
+            placeholder="Search anywhere .."
+            onKeyDown={(e) => {
+              if (e.key === 'ArrowDown') {
+                const canGoNext = activeCounter < pages.length - 1;
+                setActiveCounter(canGoNext ? activeCounter + 1 : 0);
+              } else if (e.key === 'ArrowUp') {
+                const canGoPrev = activeCounter > 0;
+                setActiveCounter(
+                  canGoPrev ? activeCounter - 1 : pages.length - 1
+                );
+              }
+            }}
+          />
+
+          <div class="mt-2 px-2">
+            <div className="flex flex-col">
+              {pages.map((page, counter) => (
+                <a
+                  class={`block w-full rounded p-2 text-sm ${
+                    counter === activeCounter ? 'bg-gray-100' : ''
+                  }`}
+                  onMouseOver={() => setActiveCounter(counter)}
+                  href={page.href}
+                >
+
+                  {searchedText && <span class='text-gray-400 mr-2'>{ page.group }</span> }
+                  {!searchedText && <span class='text-gray-400 mr-2'>ICON</span> }
+                  {page.title}
+                </a>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/layouts/BaseLayout.astro

@@ -1,6 +1,7 @@
 ---
 import Analytics from '../components/Analytics/Analytics.astro';
 import Authenticator from '../components/Authenticator/Authenticator.astro';
+import { CommandMenu } from '../components/CommandMenu/CommandMenu';
 import Footer from '../components/Footer.astro';
 import Navigation from '../components/Navigation/Navigation.astro';
 import OpenSourceBanner from '../components/OpenSourceBanner.astro';
@@ -149,6 +150,7 @@ const gaPageIdentifier = Astro.url.pathname
 
     <Authenticator />
     <PageProgress initialMessage={initialLoadingMessage} client:idle />
+    <CommandMenu client:idle />
     <PageSponsor
       gaPageIdentifier={briefTitle || gaPageIdentifier}
       client:load