archived-linsa/web/shared/la-editor/components/ui/keybind.tsx

import { ReactNode, useState } from "react"
import { motion } from "framer-motion"

export function Keybind({
  keys,
  children,
}: {
  keys: string[]
  children: ReactNode
}) {
  const [hovered, setHovered] = useState(false)
  const variants = {
    hidden: { opacity: 0, y: 6, x: "-50%" },
    visible: { opacity: 1, y: 0, x: "-50%" },
  }
  return (
    <div
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      className="group relative h-full"
    >
      <motion.div
        initial="hidden"
        animate={hovered ? "visible" : "hidden"}
        variants={variants}
        transition={{ duration: 0.2, delay: 0.4 }}
        className="absolute left-[50%] top-[-30px] flex h-fit w-fit items-center rounded-[7px] border border-slate-400/30 bg-gray-100 p-[3px] px-2 text-[10px] drop-shadow-sm dark:border-slate-400/10 dark:bg-[#191919]"
        style={{
          boxShadow: "inset 0px 0px 6px 2px var(--boxShadow)",
        }}
      >
        {keys.map((key, index) => (
          <span key={key}>
            {index > 0 && <span className="mx-1">+</span>}
            {(() => {
              switch (key.toLowerCase()) {
                case "cmd":
                  return "⌘"
                case "shift":
                  return "⇪"

                default:
                  return key
              }
            })()}
          </span>
        ))}
      </motion.div>
      {children}
    </div>
  )
}