Skip to content

Commit

Permalink
feat: kbd interactive when user keydown
Browse files Browse the repository at this point in the history
Signed-off-by: Innei <i@innei.in>
  • Loading branch information
Innei committed Sep 6, 2024
1 parent b8d1636 commit b0bf5a1
Show file tree
Hide file tree
Showing 2 changed files with 22 additions and 3 deletions.
23 changes: 21 additions & 2 deletions src/renderer/src/components/ui/kbd/Kbd.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { cn, getOS } from "@renderer/lib/utils"
import type { FC } from "react"
import { Fragment, memo } from "react"
import * as React from "react"
import { isHotkeyPressed } from "react-hotkeys-hook"

const SharedKeys = {
backspace: "⌫",
Expand Down Expand Up @@ -69,15 +70,33 @@ export const KbdCombined: FC<{
</div>
)
}

export const Kbd: FC<{ children: string, className?: string }> = memo(
({ children, className }) => {
let specialKeys = (SpecialKeys as any)[os] as Record<string, string>
specialKeys = { ...SharedKeys, ...specialKeys }

const [isKeyPressed, setIsKeyPressed] = React.useState(false)
React.useEffect(() => {
const handler = () => {
setIsKeyPressed(isHotkeyPressed(children.toLowerCase()))
}
document.addEventListener("keydown", handler)
document.addEventListener("keyup", handler)

return () => {
document.removeEventListener("keydown", handler)
document.removeEventListener("keyup", handler)
}
}, [children])

return (
<kbd
className={cn("kbd h-4 space-x-1 font-mono text-[0.7rem]", className)}
className={cn(
"kbd h-4 space-x-1 font-mono text-[0.7rem]",

isKeyPressed ? "" : "border-b-2",
className,
)}
>
{children.split("+").map((key_) => {
let key: string = key_.toLowerCase()
Expand Down
2 changes: 1 addition & 1 deletion src/renderer/src/components/ui/tooltip/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ const TooltipContent = React.forwardRef<
}}
>
{/* https://github.com/radix-ui/primitives/discussions/868 */}
<TooltipPrimitive.Arrow className="z-50 fill-white drop-shadow-[0_0_1px_theme(colors.accent.DEFAULT/0.3)] [clip-path:inset(0_-10px_-10px_-10px)] dark:fill-neutral-950" />
<TooltipPrimitive.Arrow className="z-50 fill-white drop-shadow-[0_0_1px_theme(colors.accent.DEFAULT/0.3)] [clip-path:inset(0_-10px_-10px_-10px)] dark:fill-neutral-950 dark:drop-shadow-[0_0_1px_theme(colors.white/0.5)]" />
{props.children}
</m.div>
</TooltipPrimitive.Content>
Expand Down

0 comments on commit b0bf5a1

Please sign in to comment.