Function Chain

apps/web/content/blog/build-time-components.tsx:12–66

(props: unknown)

export { BlocksToContext, WithTooltip } from "@/components/blocks-to-context"

export function Chain(props: unknown) {
  const { intro, steps, outro } = parseProps(
    props,
    Block.extend({
      intro: Block.optional(),
      steps: z.array(
        Block.extend({
          code: CodeBlock,
          this: Block.optional(),
          next: Block.optional(),
        }),
      ),
      outro: Block.optional(),
    }),
  )
  return (
    <section className="md:grid grid-cols-2 grid-flow-col gap-2 md:-mx-10 lg:-mx-32 mt-2">
      <div className="col-start-2 flex">
        {intro && (
          <>
            <Arrow intro />
            <div className=" self-center flex-1 min-w-0">{intro?.children}</div>
          </>
        )}
      </div>
      {steps.map((step, i) => (
        <Fragment key={i}>
          <div className="col-start-1 row-span-3 ">
            <Code codeblock={step.code} className="h-full m-0" />
          </div>

          <div className="col-start-2 flex">
            {step.this && (
              <>
                <Arrow />
                <div className=" self-center flex-1 min-w-0">
                  {step.this.children}
                </div>
              </>
            )}
          </div>
          {i < steps.length - 1 && (
            <div className="col-start-2 row-span-2 flex">
              <Arrow />
              <div className=" self-center flex-1 min-w-0">
                {step.next?.children}
              </div>
            </div>
          )}
        </Fragment>
      ))}
      <div className="col-start-2">{outro?.children}</div>
    </section>
  )
}

function Arrow({ intro }: { intro?: boolean }) {
  return (