mirror of
https://github.com/claude-code-best/claude-code.git
synced 2026-06-17 22:05:50 +00:00
59 lines
1.6 KiB
TypeScript
59 lines
1.6 KiB
TypeScript
import React from 'react'
|
|
import Text from '../components/Text.js'
|
|
|
|
type Props = {
|
|
/** The key or chord to display (e.g., "ctrl+o", "Enter", "↑/↓") */
|
|
shortcut: string
|
|
/** The action the key performs (e.g., "expand", "select", "navigate") */
|
|
action: string
|
|
/** Whether to wrap the hint in parentheses. Default: false */
|
|
parens?: boolean
|
|
/** Whether to render the shortcut in bold. Default: false */
|
|
bold?: boolean
|
|
}
|
|
|
|
/**
|
|
* Renders a keyboard shortcut hint like "ctrl+o to expand" or "(tab to toggle)"
|
|
*
|
|
* Wrap in <Text dimColor> for the common dim styling.
|
|
*
|
|
* @example
|
|
* // Simple hint wrapped in dim Text
|
|
* <Text dimColor><KeyboardShortcutHint shortcut="esc" action="cancel" /></Text>
|
|
*
|
|
* // With parentheses: "(ctrl+o to expand)"
|
|
* <Text dimColor><KeyboardShortcutHint shortcut="ctrl+o" action="expand" parens /></Text>
|
|
*
|
|
* // With bold shortcut: "Enter to confirm" (Enter is bold)
|
|
* <Text dimColor><KeyboardShortcutHint shortcut="Enter" action="confirm" bold /></Text>
|
|
*
|
|
* // Multiple hints with middot separator - use Byline
|
|
* <Text dimColor>
|
|
* <Byline>
|
|
* <KeyboardShortcutHint shortcut="Enter" action="confirm" />
|
|
* <KeyboardShortcutHint shortcut="Esc" action="cancel" />
|
|
* </Byline>
|
|
* </Text>
|
|
*/
|
|
export function KeyboardShortcutHint({
|
|
shortcut,
|
|
action,
|
|
parens = false,
|
|
bold = false,
|
|
}: Props): React.ReactNode {
|
|
const shortcutText = bold ? <Text bold>{shortcut}</Text> : shortcut
|
|
|
|
if (parens) {
|
|
return (
|
|
<Text>
|
|
({shortcutText} to {action})
|
|
</Text>
|
|
)
|
|
}
|
|
return (
|
|
<Text>
|
|
{shortcutText} to {action}
|
|
</Text>
|
|
)
|
|
}
|