Move to TanStack Start from Next.js (#184)

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

@@ -0,0 +1,52 @@
+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>
+  )
+}