With the code audit completed and the necessary functionality determined, it's time to build the Button component.

Keep in mind that implementing this component isn't directly related to ASTs, or doing a code audit. The Button is being used as the example of how to apply different AST-based tooling to codebase maintenance and refactoring.

In the flash-cards app, create a new file src/components/Button/Button.js for the React Button component.

The following code is a basic implementation for the component, based on the code audit.

import classNames from "classnames";

export const Button = ({

  children,

  onClick,

  block = false,

  variant = "primary",

  type = "button",

}) => (

  <button

    onClick={onClick}

    type={type}

    className={classNames("button", `button--${variant}`, {

      "button--block": block,

    })}

  >

    {children}

  </button>

);