denozord
18f3a5312a
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 1m54s
111 lines
3.1 KiB
React
111 lines
3.1 KiB
React
/**
|
|
* KeyboardShortcutHint - компонент для отображения подсказок по горячим клавишам
|
|
* Используется внутри кнопок и других элементов
|
|
*/
|
|
function KeyboardShortcutHint({ shortcut, className = '' }) {
|
|
if (!shortcut) return null
|
|
|
|
// Разбиваем комбинацию клавиш на части
|
|
const keys = shortcut.split('+').map(k => k.trim())
|
|
|
|
return (
|
|
<span className={`keyboard-shortcut-hint ${className}`}>
|
|
{keys.map((key, index) => (
|
|
<kbd key={index} className="kbd">
|
|
{key}
|
|
</kbd>
|
|
))}
|
|
|
|
<style jsx>{`
|
|
.keyboard-shortcut-hint {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
margin-left: 0.5rem;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.kbd {
|
|
background: rgba(0, 0, 0, 0.05);
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
border-radius: 0.25rem;
|
|
padding: 0.125rem 0.375rem;
|
|
font-size: 0.75rem;
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.kbd {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-color: rgba(255, 255, 255, 0.2);
|
|
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
|
|
}
|
|
}
|
|
|
|
/* Скрываем на мобильных */
|
|
@media (max-width: 768px) {
|
|
.keyboard-shortcut-hint {
|
|
display: none;
|
|
}
|
|
}
|
|
`}</style>
|
|
</span>
|
|
)
|
|
}
|
|
|
|
/**
|
|
* ShortcutsList - компонент для отображения списка горячих клавиш
|
|
* Используется в модальных окнах помощи
|
|
*/
|
|
function ShortcutsList({ shortcuts }) {
|
|
return (
|
|
<div className="shortcuts-list">
|
|
{shortcuts.map((shortcut, index) => (
|
|
<div key={index} className="shortcut-item">
|
|
<span className="shortcut-description">{shortcut.description}</span>
|
|
<KeyboardShortcutHint shortcut={shortcut.keys} />
|
|
</div>
|
|
))}
|
|
|
|
<style jsx>{`
|
|
.shortcuts-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.shortcut-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0.5rem;
|
|
border-radius: 0.25rem;
|
|
transition: background-color 0.15s ease;
|
|
}
|
|
|
|
.shortcut-item:hover {
|
|
background-color: rgba(0, 0, 0, 0.02);
|
|
}
|
|
|
|
.shortcut-description {
|
|
flex: 1;
|
|
color: var(--tblr-body-color);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.shortcut-item:hover {
|
|
background-color: rgba(255, 255, 255, 0.05);
|
|
}
|
|
}
|
|
`}</style>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export { KeyboardShortcutHint, ShortcutsList }
|
|
export default KeyboardShortcutHint
|
|
|