Split codebase (#455)

apps/yaak-client/components/core/Hotkey.tsx

@@ -0,0 +1,45 @@
+import { HStack } from "@yaakapp-internal/ui";
+import classNames from "classnames";
+import type { HotkeyAction } from "../../hooks/useHotKey";
+import { useFormattedHotkey } from "../../hooks/useHotKey";
+
+interface Props {
+  action: HotkeyAction | null;
+  className?: string;
+  variant?: "text" | "with-bg";
+}
+
+export function Hotkey({ action, className, variant }: Props) {
+  const labelParts = useFormattedHotkey(action);
+  if (labelParts === null) {
+    return null;
+  }
+
+  return <HotkeyRaw labelParts={labelParts} className={className} variant={variant} />;
+}
+
+interface HotkeyRawProps {
+  labelParts: string[];
+  className?: string;
+  variant?: "text" | "with-bg";
+}
+
+export function HotkeyRaw({ labelParts, className, variant }: HotkeyRawProps) {
+  return (
+    <HStack
+      className={classNames(
+        className,
+        variant === "with-bg" &&
+          "rounded bg-surface-highlight px-1 border border-border text-text-subtle",
+        variant === "text" && "text-text-subtlest",
+      )}
+    >
+      {labelParts.map((char, index) => (
+        // oxlint-disable-next-line react/no-array-index-key
+        <div key={index} className="min-w-[1em] text-center">
+          {char}
+        </div>
+      ))}
+    </HStack>
+  );
+}