Compiling ReasonML to JS w/ Melange

compiled.js

// Generated by Melange

import * as Stdlib__List from "melange/list.js";
import * as Stdlib__String from "melange/string.js";
import * as JsxRuntime from "react/jsx-runtime";

var base_classes = {
  hd: "text-slate-600",
  tl: {
    hd: "dark:text-slate-400",
    tl: /* [] */0
  }
};

function classes_of_font_style(param) {
  switch (param) {
    case /* Sans */0 :
        return {
                hd: "font-sans",
                tl: /* [] */0
              };
    case /* Serif */1 :
        return {
                hd: "font-serif",
                tl: /* [] */0
              };
    case /* Mono */2 :
        return {
                hd: "font-mono",
                tl: /* [] */0
              };
    
  }
}

function classes_of_font_weight(param) {
  switch (param) {
    case /* Thin */0 :
        return {
                hd: "font-thin",
                tl: /* [] */0
              };
    case /* Extra_light */1 :
        return {
                hd: "font-extralight",
                tl: /* [] */0
              };
    case /* Light */2 :
        return {
                hd: "font-light",
                tl: /* [] */0
              };
    case /* Normal */3 :
        return {
                hd: "font-normal",
                tl: /* [] */0
              };
    case /* Medium */4 :
        return {
                hd: "font-medium",
                tl: /* [] */0
              };
    case /* Semi_bold */5 :
        return {
                hd: "font-semibold",
                tl: /* [] */0
              };
    case /* Bold */6 :
        return {
                hd: "font-bold",
                tl: /* [] */0
              };
    case /* Extra_bold */7 :
        return {
                hd: "font-extrabold",
                tl: /* [] */0
              };
    case /* Black */8 :
        return {
                hd: "font-black",
                tl: /* [] */0
              };
    
  }
}

function classes_of_size(param) {
  switch (param) {
    case /* Small */0 :
        return {
                hd: "text-xs",
                tl: /* [] */0
              };
    case /* Base */1 :
        return {
                hd: "text-base",
                tl: /* [] */0
              };
    case /* Large */2 :
        return {
                hd: "text-2xl",
                tl: /* [] */0
              };
    
  }
}

function classes_of_props(font_style, font_weight, size) {
  return Stdlib__String.concat(" ", Stdlib__List.flatten({
                  hd: base_classes,
                  tl: {
                    hd: classes_of_font_style(font_style),
                    tl: {
                      hd: classes_of_size(size),
                      tl: {
                        hd: classes_of_font_weight(font_weight),
                        tl: /* [] */0
                      }
                    }
                  }
                }));
}

function render_elt(elt, classes, children) {
  switch (elt) {
    case /* H1 */0 :
        return JsxRuntime.jsx("h1", {
                    children: children,
                    className: classes
                  });
    case /* H2 */1 :
        return JsxRuntime.jsx("h2", {
                    children: children,
                    className: classes
                  });
    case /* H3 */2 :
        return JsxRuntime.jsx("h3", {
                    children: children,
                    className: classes
                  });
    case /* H4 */3 :
        return JsxRuntime.jsx("h4", {
                    children: children,
                    className: classes
                  });
    case /* H5 */4 :
        return JsxRuntime.jsx("h5", {
                    children: children,
                    className: classes
                  });
    case /* H6 */5 :
        return JsxRuntime.jsx("h6", {
                    children: children,
                    className: classes
                  });
    case /* P */6 :
        return JsxRuntime.jsx("p", {
                    children: children,
                    className: classes
                  });
    
  }
}

function Typography(Props) {
  var eltOpt = Props.elt;
  var sizeOpt = Props.size;
  var font_styleOpt = Props.font_style;
  var font_weightOpt = Props.font_weight;
  var children = Props.children;
  var elt = eltOpt !== undefined ? eltOpt : /* P */6;
  var size = sizeOpt !== undefined ? sizeOpt : /* Base */1;
  var font_style = font_styleOpt !== undefined ? font_styleOpt : /* Sans */0;
  var font_weight = font_weightOpt !== undefined ? font_weightOpt : /* Normal */3;
  return render_elt(elt, classes_of_props(font_style, font_weight, size), children);
}

var make = Typography;

export {
  base_classes ,
  classes_of_font_style ,
  classes_of_font_weight ,
  classes_of_size ,
  classes_of_props ,
  render_elt ,
  make ,
}
/* react/jsx-runtime Not a pure module */

typography.re

type elt =
  | H1
  | H2
  | H3
  | H4
  | H5
  | H6
  | P;

type size =
  | Small
  | Base
  | Large;

type font_style =
  | Sans
  | Serif
  | Mono;

type font_weight =
  | Thin
  | Extra_light
  | Light
  | Normal
  | Medium
  | Semi_bold
  | Bold
  | Extra_bold
  | Black;

let base_classes = ["text-slate-600", "dark:text-slate-400"];

let classes_of_font_style =
  fun
  | Sans => ["font-sans"]
  | Serif => ["font-serif"]
  | Mono => ["font-mono"];

let classes_of_font_weight =
  fun
  | Thin => ["font-thin"]
  | Extra_light => ["font-extralight"]
  | Light => ["font-light"]
  | Normal => ["font-normal"]
  | Medium => ["font-medium"]
  | Semi_bold => ["font-semibold"]
  | Bold => ["font-bold"]
  | Extra_bold => ["font-extrabold"]
  | Black => ["font-black"];

let classes_of_size =
  fun
  | Small => ["text-xs"]
  | Base => ["text-base"]
  | Large => ["text-2xl"];

let classes_of_props = (~font_style, ~font_weight, ~size) =>
  List.flatten([
    base_classes,
    classes_of_font_style(font_style),
    classes_of_size(size),
    classes_of_font_weight(font_weight),
  ])
  |> String.concat(" ");

let render_elt = (~elt, ~classes, ~children) =>
  switch (elt) {
  | H1 => <h1 className=classes> children </h1>
  | H2 => <h2 className=classes> children </h2>
  | H3 => <h3 className=classes> children </h3>
  | H4 => <h4 className=classes> children </h4>
  | H5 => <h5 className=classes> children </h5>
  | H6 => <h6 className=classes> children </h6>
  | P => <p className=classes> children </p>
  };

[@react.component]
let make =
    (~elt=P, ~size=Base, ~font_style=Sans, ~font_weight=Normal, ~children) => {
  render_elt(
    ~elt,
    ~classes=classes_of_props(~font_style, ~font_weight, ~size),
    ~children,
  );
};