Button Variant with Reason

Button.re

open Util;
module Secondary = {
  let component = ReasonReact.statelessComponent(__MODULE__);

  type active = {
    href: string,
    target: string,
  };

  type kind =
    | Active(active)
    | Inactive;

  let make =
      (
        ~kind=Inactive,
        ~text: string,
        ~icon: option(ReasonReact.reactElement)=?,
        _children,
      ) => {
    ...component,
    render: _self => {
      let body =
        <span className="flex h-4 flex-row text-sm">
          {
            switch (icon) {
            | None => ReasonReact.null
            | Some(icon) => icon
            }
          }
          <span className="font-bold ml-2"> text->s </span>
        </span>;

      let baseClassName = "inline-block py-2 px-3 rounded";

      switch (kind) {
      | Active({href, target}) =>
        let className =
          baseClassName
          ++ " text-main-lighten-50 hover:text-primary no-underline cursor-pointer hover:bg-primary-lighten-90";
        <a className href target> body </a>;
      | Inactive =>
        let className =
          baseClassName ++ " text-main-lighten-90 cursor-default";

        <div className> body </div>;
      };
    },
  };
};

Usage.re

type GithubItem = {
  prHref: option(string)
};

let item = {
  prHref: Some("test/pull/123")
};

let test = <Button.Secondary
             text="Pull Request"
             kind={
               switch (item.prHref) {
                 | Some(href) => Active({href, target: "_blank"})
                 | None => Inactive
               }
             }
             icon=<img/>
            />;