ShortcutPalette

shortcutpalette-1779388706139.tsx

'use client';
import { useState, useEffect } from 'react';

export default function ShortcutPalette() {
  const [open, setOpen] = useState(false);
  const [search, setSearch] = useState('');

  const shortcuts = [
    { keys: ['⌘', 'K'], action: 'Open Command Menu', category: 'Navigation' },
    { keys: ['⌘', 'N'], action: 'New Document', category: 'Files' },
    { keys: ['⌘', 'S'], action: 'Save', category: 'Files' },
    { keys: ['⌘', 'Z'], action: 'Undo', category: 'Edit' },
    { keys: ['⌘', '⇧', 'Z'], action: 'Redo', category: 'Edit' },
    { keys: ['⌘', '/'], action: 'Toggle Comment', category: 'Code' },
    { keys: ['⌘', 'P'], action: 'Quick Open', category: 'Navigation' },
    { keys: ['⌘', 'B'], action: 'Toggle Sidebar', category: 'View' },
    { keys: ['⌘', '⇧', 'P'], action: 'Command Palette', category: 'Navigation' },
    { keys: ['F5'], action: 'Run & Debug', category: 'Code' },
  ];

  const filtered = shortcuts.filter(s => s.action.toLowerCase().includes(search.toLowerCase()) || s.category.toLowerCase().includes(search.toLowerCase()));

  return (
    <div style={{ fontFamily: 'system-ui, sans-serif' }}>
      <button onClick={() => setOpen(true)} style={{
        background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.1)',
        borderRadius: '8px', padding: '8px 16px',
        color: 'rgba(245,245,240,0.7)', fontSize: '13px', cursor: 'pointer',
        display: 'flex', alignItems: 'center', gap: '8px',
      }}>
        <span>Shortcuts</span>
        <kbd style={{ background: 'rgba(255,255,255,0.08)', borderRadius: '4px', padding: '1px 6px', fontSize: '11px' }}>?</kbd>
      </button>
      {open && (
        <div style={{
          position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.7)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          zIndex: 9999, backdropFilter: 'blur(4px)',
        }} onClick={() => setOpen(false)}>
          <div onClick={e => e.stopPropagation()} style={{
            background: '#141414', border: '1px solid rgba(255,255,255,0.1)',
            borderRadius: '16px', width: '480px', overflow: 'hidden',
            boxShadow: '0 24px 80px rgba(0,0,0,0.6)',
          }}>
            <div style={{ padding: '16px', borderBottom: '1px solid rgba(255,255,255,0.06)' }}>
              <input
                autoFocus value={search} onChange={e => setSearch(e.target.value)}
                placeholder="Search shortcuts..."
                style={{
                  width: '100%', boxSizing: 'border-box',
                  background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.1)',
                  borderRadius: '8px', padding: '10px 14px',
                  color: '#F5F5F0', fontSize: '14px', outline: 'none', fontFamily: 'system-ui',
                }}
              />
            </div>
            <div style={{ maxHeight: '360px', overflowY: 'auto', padding: '8px' }}>
              {filtered.map((s, i) => (
                <div key={i} style={{
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                  padding: '10px 12px', borderRadius: '8px', cursor: 'default',
                  transition: 'background 0.15s',
                }}
                  onMouseEnter={e => e.currentTarget.style.background = 'rgba(255,255,255,0.04)'}
                  onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
                >
                  <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
                    <span style={{ background: 'rgba(255,255,255,0.05)', color: 'rgba(245,245,240,0.4)', borderRadius: '4px', padding: '1px 7px', fontSize: '11px' }}>{s.category}</span>
                    <span style={{ color: 'rgba(245,245,240,0.8)', fontSize: '13px' }}>{s.action}</span>
                  </div>
                  <div style={{ display: 'flex', gap: '4px' }}>
                    {s.keys.map((k, j) => (
                      <kbd key={j} style={{ background: 'rgba(255,255,255,0.08)', border: '1px solid rgba(255,255,255,0.12)', borderRadius: '5px', padding: '2px 7px', color: '#C9A84C', fontSize: '12px', fontFamily: 'monospace' }}>{k}</kbd>
                    ))}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

Component info

CategoryNavigation

Frameworkreact

TierFREE

Copies0

About

Keyboard shortcut palette overlay

More from Navigation

import * as React from 'react';
import * as ReactDOM from 'react-dom';

interface FloatingDockProps {
  icons: { id: number; src: string; }[];
}

class FloatingDock extends React.Component<FloatingDockProps, {}> {
  constructor(props: FloatingDockPro

FloatingDock

Navigation

'use client'
import { useState } from 'react'

const NAV = [
  { id: 'home', icon: '◉', label: 'Overview', shortcut: 'G H' },
  { id: 'components', icon: '⬡', label: 'Components', shortcut: 'G C', badge: 120, children: [
    { id: 'buttons', label: '

SidebarNav

Navigation

'use client';

import React from 'react';

interface PaginationNavProps {
  currentPage: number;
  totalPages: number;
  onPageChange: (page: number) => void;
}

const PaginationNav: React.FC<PaginationNavProps> = ({ currentPage, totalPages, onPageCh

PaginationNav

Navigation

'use client';

import React, { useState } from 'react';

interface Tab {
  id: number;
  label: string;
}

const tabs: Tab[] = [
  { id: 1, label: 'Tab 1' },
  { id: 2, label: 'Tab 2' },
  { id: 3, label: 'Tab 3' },
  { id: 4, label: 'Tab 4' },
];

c

TabsNav

Navigation