"use client"; import { useEffect, useState } from "react"; import { motion } from "framer-motion"; import { Command, Search, Save, PanelLeft, Braces, ArrowBigUp, Option, CornerDownLeft, type LucideIcon, } from "lucide-react"; import { cn } from "@/lib/utils"; /* -------------------------------------------------------------------------- */ /* Types */ /* -------------------------------------------------------------------------- */ export type Shortcut = { /** Human label for the action, e.g. "Command menu". */ label: string; /** Ordered key tokens, e.g. ["cmd", "K"]. Modifiers map to icons. */ keys: string[]; /** Optional action icon rendered on the left of the row. */ icon?: LucideIcon; }; /* -------------------------------------------------------------------------- */ /* Key cap */ /* -------------------------------------------------------------------------- */ const KEY_ICONS: Record = { cmd: Command, command: Command, shift: ArrowBigUp, opt: Option, option: Option, alt: Option, enter: CornerDownLeft, return: CornerDownLeft, }; // Every state keeps four shadow layers so framer-motion interpolates cleanly. const REST_SHADOW = [ "0 3px 0 0 rgba(5,5,9,0.95)", "0 6px 11px -1px rgba(0,0,0,0.55)", "inset 0 1px 0 0 rgba(255,255,255,0.10)", "inset 0 -3px 5px 0 rgba(0,0,0,0.35)", ].join(", "); const PRESS_SHADOW = [ "0 1px 0 0 rgba(5,5,9,0.95)", "0 2px 4px -1px rgba(0,0,0,0.45)", "inset 0 1px 0 0 rgba(255,255,255,0.05)", "inset 0 2px 6px 0 rgba(0,0,0,0.55)", ].join(", "); const PRESS_SHADOW_ACCENT = [ "0 1px 0 0 rgba(52,44,104,0.95)", "0 2px 8px -1px rgba(124,108,255,0.30)", "inset 0 1px 0 0 rgba(168,157,255,0.18)", "inset 0 2px 7px 0 rgba(124,108,255,0.32)", ].join(", "); function KeyCap({ token, down, accent, }: { token: string; down: boolean; accent: boolean; }) { const Icon = KEY_ICONS[token.toLowerCase()]; const tinted = down && accent; return ( {Icon ? ( ) : ( {token} )} ); } /* -------------------------------------------------------------------------- */ /* KbdKeys, auto-typing shortcut panel */ /* -------------------------------------------------------------------------- */ /** * A keyboard-shortcut display with realistic 3D key caps. It cycles through * the provided shortcuts and depresses each one's keys in sequence, like a * hand typing the combo, then releases and moves to the next. */ export function KbdKeys({ shortcuts, title = "Keyboard shortcuts", caption = "Every action, one keystroke away.", className, }: { shortcuts: Shortcut[]; title?: string; caption?: string; className?: string; }) { const [active, setActive] = useState(0); // How many keys of the active shortcut are currently held down (0..n). const [held, setHeld] = useState(0); useEffect(() => { const keys = shortcuts[active]?.keys ?? []; const timers: ReturnType[] = []; let t = 460; // settle before the first press const step = 240; // gap between successive key presses const hold = 560; // hold the full combo const gap = 820; // pause after release before the next shortcut for (let i = 0; i < keys.length; i++) { t += step; const count = i + 1; timers.push(setTimeout(() => setHeld(count), t)); } t += hold; timers.push(setTimeout(() => setHeld(0), t)); t += gap; timers.push( setTimeout(() => setActive((a) => (a + 1) % shortcuts.length), t) ); return () => timers.forEach(clearTimeout); }, [active, shortcuts]); const activeLabel = shortcuts[active]?.label ?? ""; return (

{/* Header */}

{title}

{caption}

{/* Rows */}

{shortcuts.map((sc, index) => { const isActive = index === active; const fired = isActive && held === sc.keys.length && held > 0; const RowIcon = sc.icon; return (

{isActive && ( )}

{RowIcon && ( )} {sc.label}

{sc.keys.map((token, i) => ( ))}

); })}

{/* Footer status */}

Running {activeLabel}

); } /* -------------------------------------------------------------------------- */ /* Demo */ /* -------------------------------------------------------------------------- */ const DEMO_SHORTCUTS: Shortcut[] = [ { label: "Command menu", keys: ["cmd", "K"], icon: Command }, { label: "Search files", keys: ["cmd", "P"], icon: Search }, { label: "Save changes", keys: ["cmd", "S"], icon: Save }, { label: "Toggle sidebar", keys: ["cmd", "B"], icon: PanelLeft }, { label: "Format document", keys: ["cmd", "shift", "F"], icon: Braces }, ]; export default function Demo() { return (

); }

Keyboard Keys

Keyboard shortcuts