Extract Kbd component, add an info box to How It Works section

Author: hasparus

src/_design-system/kbd.tsx

@@ -0,0 +1,13 @@
+import clsx from "clsx"
+
+export function Kbd(props: React.HTMLAttributes<HTMLElement>) {
+  return (
+    <kbd
+      {...props}
+      className={clsx(
+        "inline-flex h-5 items-center gap-0.5 rounded border border-b-2 border-neu-300 bg-white px-1.5 font-mono text-[11px] font-medium text-neu-700 contrast-more:border-current contrast-more:text-current dark:border-neu-100/30 dark:bg-neu-0/50 dark:text-neu-500 contrast-more:dark:border-current max-sm:hidden",
+        props.className,
+      )}
+    />
+  )
+}

src/components/index-page/how-it-works/index.tsx

@@ -1,9 +1,11 @@
-import { useRef } from "react"
+import { useRef, useState } from "react"
 import { useInView } from "motion/react"
 import dynamic from "next/dynamic"
+import { clsx } from "clsx"
 
 import { Button } from "@/app/conf/_design-system/button"
 import { SectionLabel } from "@/app/conf/_design-system/section-label"
+import InfoIcon from "@/app/conf/_design-system/pixelarticons/info.svg?svgr"
 import {
   HowItWorks_Schema,
   HowItWorks_Query,
@@ -12,6 +14,7 @@ import {
 
 import { HowItWorksListItem } from "./how-it-works-list-item"
 import { PlayButton } from "./play-button"
+import { Kbd } from "../../../_design-system/kbd"
 
 const InteractiveEditor = dynamic(() => import("./interactive-editor"), {
   ssr: false,
@@ -24,6 +27,7 @@ export function HowItWorks() {
   // todo: we could technically consider loading the chunk on hover or focus,
   // just so people scrolling through the page don't download CodeMirror
   const inView = useInView(sectionRef)
+  const [interacted, setInteracted] = useState(false)
 
   return (
     <section
@@ -55,15 +59,46 @@ export function HowItWorks() {
           <ol
             // this is rendered *on top* of the static version to avoid layout shift
             className="max-lg:before pointer-events-none absolute inset-0 list-none gap-px [counter-set:list-item_1] *:pointer-events-auto max-lg:before:absolute max-lg:before:inset-x-0 max-lg:before:-top-2 max-lg:before:bottom-[98%] max-lg:before:bg-[rgb(var(--nextra-bg))] max-sm:top-[191px] sm:max-lg:top-[214px] lg:grid lg:grid-cols-3 lg:[&>:first-child]:col-start-2"
+            onKeyDown={() => {
+              if (!interacted) setInteracted(true)
+            }}
           >
             <InteractiveEditor />
           </ol>
         )}
       </div>
+      <FigureInfo className={interacted ? "hidden" : ""} />
 
       <Button className="mx-auto mt-8 w-fit lg:mt-16" href={TRY_IT_OUT_URL}>
         Try GraphiQL
       </Button>
     </section>
   )
 }
+
+function FigureInfo({ className }: { className?: string }) {
+  return (
+    <div
+      className={clsx(
+        "typography-body-sm mx-auto mt-12 flex w-fit gap-2 text-neu-800 hover-none:hidden dark:text-neu-600",
+        className,
+      )}
+    >
+      <InfoIcon className="size-4 shrink-0 translate-y-[2.25px]" />
+      <p className="text-neu-800">
+        Press <Kbd>Ctrl</Kbd>
+        <Kbd className="ml-0.5">Space</Kbd> to show the completions, <MetaKey />
+        <Kbd>Enter</Kbd> to run the query.
+      </p>
+    </div>
+  )
+}
+
+function MetaKey() {
+  return (
+    <>
+      <Kbd className="mx-0.5 hidden [.mac_&]:inline-flex">⌘</Kbd>
+      <Kbd className="mx-0.5 [.mac_&]:hidden">Ctrl</Kbd>
+    </>
+  )
+}

src/components/interactive-code-block/query-editor.tsx

@@ -84,6 +84,7 @@ export class QueryEditor extends Component<QueryEditorProps> {
         graphql(this.props.schema, {}),
         autocompletion({
           icons: false,
+          activateOnTyping: true,
         }),
         EditorView.updateListener.of(update => {
           if (update.docChanged && !this.ignoreChangeEvent) {

src/components/search.tsx

@@ -17,6 +17,7 @@ import type {
   SyntheticEvent,
 } from "react"
 import { Fragment, useCallback, useEffect, useRef, useState } from "react"
+import { Kbd } from "../_design-system/kbd"
 
 export type SearchResult = {
   children: ReactNode
@@ -83,24 +84,15 @@ export function Search({
   }, [])
 
   const icon = mounted && !focused && (
-    <kbd
-      className={clsx(
-        "absolute right-1.5 my-1.5 select-none rtl:left-1.5",
-        "h-5 bg-white px-1.5 font-mono text-[11px] font-medium text-neu-600",
-        "border dark:border-neu-100/20 dark:bg-neu-0/50",
-        "contrast-more:border-current contrast-more:text-current contrast-more:dark:border-current",
-        "flex items-center gap-1",
-        "max-sm:hidden",
-      )}
-    >
+    <Kbd className="absolute right-1.5 my-1.5 select-none max-sm:hidden rtl:left-1.5">
       {navigator.userAgent.includes("Mac") ? (
         <>
-          <span className="_text-xs">⌘</span>K
+          <span className="text-xs">⌘</span>K
         </>
       ) : (
         "CTRL K"
       )}
-    </kbd>
+    </Kbd>
   )
 
   const handleFocus = useCallback<FocusEventHandler>(

src/pages/_document.tsx

@@ -7,6 +7,12 @@ export default function Document() {
       <body>
         <Main />
         <NextScript />
+        <script
+          dangerouslySetInnerHTML={{
+            __html:
+              'if (window.navigator.platform.includes("Mac")) document.documentElement.classList.add("mac")',
+          }}
+        />
       </body>
     </Html>
   )