53 lines
1.5 KiB
TypeScript
53 lines
1.5 KiB
TypeScript
import { Component, For } from "solid-js"
|
|
import useMediaQuery from "@suid/material/useMediaQuery"
|
|
import type { KeyboardShortcut } from "../lib/keyboard-registry"
|
|
import Kbd from "./kbd"
|
|
import HintRow from "./hint-row"
|
|
|
|
const KeyboardHint: Component<{
|
|
shortcuts: KeyboardShortcut[]
|
|
separator?: string | null
|
|
showDescription?: boolean
|
|
class?: string
|
|
ariaHidden?: boolean
|
|
}> = (props) => {
|
|
// Centralize layout gating here so call sites don't need to.
|
|
// We only show keyboard hint UI on desktop layouts.
|
|
const desktopQuery = useMediaQuery("(min-width: 1280px)")
|
|
|
|
function buildShortcutString(shortcut: KeyboardShortcut): string {
|
|
const parts: string[] = []
|
|
|
|
if (shortcut.modifiers.ctrl || shortcut.modifiers.meta) {
|
|
parts.push("cmd")
|
|
}
|
|
if (shortcut.modifiers.shift) {
|
|
parts.push("shift")
|
|
}
|
|
if (shortcut.modifiers.alt) {
|
|
parts.push("alt")
|
|
}
|
|
parts.push(shortcut.key)
|
|
|
|
return parts.join("+")
|
|
}
|
|
|
|
if (!desktopQuery()) return null
|
|
|
|
return (
|
|
<HintRow class={props.class} ariaHidden={props.ariaHidden}>
|
|
<For each={props.shortcuts}>
|
|
{(shortcut, i) => (
|
|
<>
|
|
{i() > 0 && props.separator !== null && <span class="mx-1">{props.separator ?? "•"}</span>}
|
|
{props.showDescription !== false && <span class="mr-1">{shortcut.description}</span>}
|
|
<Kbd shortcut={buildShortcutString(shortcut)} />
|
|
</>
|
|
)}
|
|
</For>
|
|
</HintRow>
|
|
)
|
|
}
|
|
|
|
export default KeyboardHint
|