challenge-vtex-io-emmanuelvitor/react/components/Html/index.tsx

import React, { ReactNode } from "react";
import { useCssHandles } from "vtex.css-handles";
import "./styles.css"
const CSS_HANDLES = ["html"] as const;

type HtmlProps = {
  children?: ReactNode,
  /**
   * Qual tag Html que deseja que seja usar
   *
   * @default div
   */
  tag?: keyof React.ReactHTML
  /**
   * Classes CSS extras que deseja adicionar.
   * Feito para uso de [classes do tachyons](https://tachyons.io/)
   */
  tachyonsClasses?: string
  /**
   * Se caso quiser usar esse componente
   * para adicinar um texto simples
   */
  text?: string
  /**
     * Tag ID para
     */
  testId?: string
}

export const Html = ({ children = null, tag = "div", text = "", tachyonsClasses: classes = "", testId }: HtmlProps) => {
  const { handles } = useCssHandles(CSS_HANDLES);

  const props = {
    className: `${handles.html} ${classes}`,
    "data-testid": testId
  };
  const Children = <>{children}{text}</>;
  const Element = React.createElement(tag, props, Children);

  return <>{Element}</>;
};