export function APIAnatomy()

in beta/src/components/MDX/APIAnatomy.tsx [43:79]

35 lines of code
4 McCabe index (conditional complexity)


export function APIAnatomy({children}: APIAnatomyProps) {
  const [activeStep, setActiveStep] = React.useState<number | null>(null);

  const {steps, code} = React.Children.toArray(children).reduce(
    (acc: AnatomyContent, child) => {
      if (!React.isValidElement(child)) return acc;
      switch (child.props.mdxType) {
        case 'AnatomyStep':
          acc.steps.push(
            React.cloneElement(child, {
              ...child.props,
              activeStep,
              handleStepChange: setActiveStep,
              stepNumber: acc.steps.length + 1,
            })
          );
          break;
        case 'pre':
          acc.code = (
            <CodeBlock {...child.props.children.props} noMargin={true} />
          );
          break;
      }
      return acc;
    },
    {steps: [], code: null}
  );

  return (
    <section className="my-8 grid grid-cols-1 lg:grid-cols-2 gap-x-8 gap-y-4">
      <div className="lg:order-2">{code}</div>
      <div className="lg:order-1 flex flex-col justify-center gap-y-2">
        {steps}
      </div>
    </section>
  );
}