feat: kbd interactive when user keydown

Signed-off-by: Innei <i@innei.in>
RSSNext · Sep 6, 2024 · b0bf5a1 · b0bf5a1
1 parent b8d1636
commit b0bf5a1
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 3 deletions.
diff --git a/src/renderer/src/components/ui/kbd/Kbd.tsx b/src/renderer/src/components/ui/kbd/Kbd.tsx
@@ -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: "⌫",
@@ -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()

diff --git a/src/renderer/src/components/ui/tooltip/index.tsx b/src/renderer/src/components/ui/tooltip/index.tsx
@@ -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>