Add Precision figure

Author: hasparus

src/components/code-blocks/index.tsx

@@ -49,6 +49,3 @@ export const QueryHeroFriends = () => (
 export const ResponseHeroFriends = () => (
   <_ResponseHeroFriends components={components} />
 )
-export const PredictableResult = () => (
-  <_PredictableResult components={components} />
-)

src/components/index-page/graphql-advantages/index.tsx

@@ -2,17 +2,19 @@ import { Button } from "@/app/conf/_design-system/button"
 import { SectionLabel } from "@/app/conf/_design-system/section-label"
 import { ReactNode } from "react"
 
+import { PrecisionFigure } from "./precision"
+
 export function GraphQLAdvantages() {
   return (
-    <section className="bg-neu-50">
+    <section className="bg-neu-50 dark:bg-neu-50/25">
       <div className="gql-container gql-section">
         <SectionLabel>GraphQL advantages</SectionLabel>
         <div className="mt-8 flex flex-col gap-y-10">
           <Subsection
             name="Precision"
             bigText="Ask for what you need, get exactly that"
             text="Send a GraphQL query to your API and get precisely the data you request — no over-fetching, no under-fetching. Predictable responses keep apps efficient and performant."
-            figure={null}
+            figure={<PrecisionFigure />}
             cta={
               <Button href="/learn" variant="secondary">
                 Learn GraphQL
@@ -106,7 +108,7 @@ function Subsection({
       </strong>
       <div className="max-lg:mt-6 lg:![grid-column:2]">{figure}</div>
       <p className="typography-body-lg my-6 lg:mb-4 lg:mt-8">{text}</p>
-      {cta}
+      <div>{cta}</div>
     </article>
   )
 }

src/components/index-page/predictable-results/index.module.css renamed to src/components/index-page/graphql-advantages/precision.module.css

@@ -1,11 +1,25 @@
-import { useEffect, useRef } from "react"
-import { PredictableResult } from "../../code-blocks"
-import { Pre } from "nextra/components"
+import { ComponentPropsWithoutRef, useEffect, useRef } from "react"
+import { Pre, Code } from "nextra/components"
 import { clsx } from "clsx"
-import classes from "./index.module.css"
 
-export function PredictableResults() {
+import PredictableResult from "../../code-blocks/predictable-result.mdx"
+
+import classes from "./precision.module.css"
+
+const components = {
+  pre: (props: ComponentPropsWithoutRef<typeof Pre>) => (
+    <Pre
+      {...props}
+      className={clsx(props.className, "!bg-neu-0/[.48]")}
+      tabIndex={-1}
+    />
+  ),
+  code: Code,
+}
+
+export function PrecisionFigure() {
   const ref = useRef<HTMLDivElement>(null)
+
   useEffect(() => {
     const showResponse = (num: Number) => {
       const lines = ref.current!.querySelectorAll(
@@ -66,51 +80,35 @@ export function PredictableResults() {
 
     return () => clearTimeout(timer)
   }, [])
+
+  const Pre = components.pre
+
   return (
-    <div className="index-gradient">
-      <section
-        className="conf-block container flex flex-col justify-around gap-14 lg:flex-row-reverse lg:items-start lg:*:w-1/2"
-        id="predictable-results"
-      >
-        <div className="max-lg:text-center">
-          <h2>
-            Ask for what you need, <br className="max-lg:hidden" />
-            get exactly that
-          </h2>
-          {/*[Illustration: just a simple query and response?]*/}
-          <p>
-            Send a GraphQL query to your API and get exactly what you need,
-            nothing more and nothing less. GraphQL queries always return
-            predictable results. Apps using GraphQL are fast and stable because
-            they control the data they get, not the server.
-          </p>
-        </div>
-        <div
-          ref={ref}
-          className="nextra-codeblocks flex *:w-1/2 [&_pre]:!h-48"
-          aria-hidden
-        >
-          <Pre data-filename="Query" className="p-4">
-            {"{"}
-            {"\n  hero {"}
-            {"\n    name"}
-            {"\n    height\n    mass".split("").map((char, i) => (
-              <span key={i} id={"ch" + i} className="hidden">
-                {char === "\n" ? <br /> : char}
-              </span>
-            ))}
-            <span
-              className={clsx(
-                "-mb-0.5 ml-px inline-block h-4 w-2 !bg-primary/50",
-                classes.cursor,
-              )}
-            />
-            {"\n  }"}
-            {"\n}"}
-          </Pre>
-          <PredictableResult />
-        </div>
-      </section>
+    <div
+      ref={ref}
+      id="predictable-results"
+      className="nextra-codeblocks flex bg-gradient-to-b from-transparent to-sec-lighter px-[14px] py-[30px] *:w-1/2 dark:to-sec-darker/25 [&_pre]:!h-48"
+      aria-hidden
+    >
+      <Pre data-filename="Query" className="p-4">
+        {"{"}
+        {"\n  hero {"}
+        {"\n    name"}
+        {"\n    height\n    mass".split("").map((char, i) => (
+          <span key={i} id={"ch" + i} className="hidden">
+            {char === "\n" ? <br /> : char}
+          </span>
+        ))}
+        <span
+          className={clsx(
+            "-mb-0.5 ml-px inline-block h-4 w-2 !bg-pri-base/50 dark:!bg-sec-base/50",
+            classes.cursor,
+          )}
+        />
+        {"\n  }"}
+        {"\n}"}
+      </Pre>
+      <PredictableResult components={components} />
     </div>
   )
 }

src/components/index-page/predictable-results/index.tsx renamed to src/components/index-page/graphql-advantages/precision.tsx

@@ -33,7 +33,6 @@ export function IndexPage() {
           easier to evolve APIs over time, and enables powerful developer tools.
         </p>
       </section>
-      <PredictableResults />
       <SingleRequest />
       <TypeSystem />
       <PowerFulTools />