Command Palette Overlay

'use client';

import './CommandDialog.css';

/** CommandDialog — ported from astro-component-kit. */
export interface CommandDialogProps {
}

export function CommandDialog({}: CommandDialogProps) {
  return (
    <>
      <div className="cmd-overlay" data-rk-1922ac="">
        <div className="cmd-box" data-rk-1922ac="">
          <div className="cmd-input" data-rk-1922ac=""><input type="text" placeholder="Search commands..." data-rk-1922ac="" /></div>
          <div className="cmd-results" data-rk-1922ac="">
              <div className="res" data-rk-1922ac=""><span data-rk-1922ac="">Recent: Dashboard</span><kbd data-rk-1922ac="">↵</kbd></div>
              <div className="res" data-rk-1922ac=""><span data-rk-1922ac="">Docs: Navigation</span><kbd data-rk-1922ac="">↵</kbd></div>
          </div>
        </div>
      </div>
    </>
  );
}

export default CommandDialog;

/* CommandDialog — ported from astro-component-kit (overlays/CommandDialog.astro) */

.cmd-overlay:where([data-rk-1922ac]) { position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); display: flex; justify-content: center; padding-top: 15vh; z-index: 3000; }
.cmd-box:where([data-rk-1922ac]) { width: 100%; max-width: 600px; background: #080b14; border: 1px solid #334155; border-radius: 12px; overflow: hidden; box-shadow: 0 30px 100px rgba(0,0,0,0.8); }
.cmd-input:where([data-rk-1922ac]) input:where([data-rk-1922ac]) { width: 100%; padding: 1.25rem; background: transparent; border: none; border-bottom: 1px solid #1e293b; color: #fff; outline: none; font-size: 1.1rem; }
.res:where([data-rk-1922ac]) { display: flex; justify-content: space-between; padding: 0.75rem 1.25rem; color: #94a3b8; font-size: 0.9rem; cursor: pointer; }
.res:hover:where([data-rk-1922ac]) { background: #1e293b; color: #fff; }
kbd:where([data-rk-1922ac]) { background: #111; padding: 2px 4px; border-radius: 4px; font-size: 0.7rem; }