feat: add Keybind component for displaying keyboard shortcuts

3 files changed, 39 insertions, 0 deletions

diff --git a/packages/ui/src/components/keybind.css b/packages/ui/src/components/keybind.css
new file mode 100644
index 000000000..1a9e5dce4
--- /dev/null
+++ b/packages/ui/src/components/keybind.css
@@ -0,0 +1,18 @@
+[data-component="keybind"] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  height: 20px;
+  padding: 0 8px;
+  border-radius: 2px;
+  background: var(--surface-base);
+  box-shadow: var(--shadow-xxs-border);
+
+  /* text-12-medium */
+  font-family: var(--font-family-sans);
+  font-size: 12px;
+  font-weight: var(--font-weight-medium);
+  line-height: 1;
+  color: var(--text-weak);
+}
diff --git a/packages/ui/src/components/keybind.tsx b/packages/ui/src/components/keybind.tsx
new file mode 100644
index 000000000..a0fa0483f
--- /dev/null
+++ b/packages/ui/src/components/keybind.tsx
@@ -0,0 +1,20 @@
+import type { ComponentProps, ParentProps } from "solid-js"
+
+export interface KeybindProps extends ParentProps {
+  class?: string
+  classList?: ComponentProps<"span">["classList"]
+}
+
+export function Keybind(props: KeybindProps) {
+  return (
+    <span
+      data-component="keybind"
+      classList={{
+        ...(props.classList ?? {}),
+        [props.class ?? ""]: !!props.class,
+      }}
+    >
+      {props.children}
+    </span>
+  )
+}
diff --git a/packages/ui/src/styles/index.css b/packages/ui/src/styles/index.css
index 8ab4d6ca4..b4b0883ae 100644
--- a/packages/ui/src/styles/index.css
+++ b/packages/ui/src/styles/index.css
@@ -24,6 +24,7 @@
 @import "../components/icon.css" layer(components);
 @import "../components/icon-button.css" layer(components);
 @import "../components/image-preview.css" layer(components);
+@import "../components/keybind.css" layer(components);
 @import "../components/text-field.css" layer(components);
 @import "../components/inline-input.css" layer(components);
 @import "../components/list.css" layer(components);