Add Export

docs/_react/bulma-customizer/src/components/Export.jsx

@@ -0,0 +1,66 @@
+import { useContext, useEffect, useState } from "react";
+import { CustomizerContext } from "../App";
+
+import Highlighter from "components/Highlighter";
+
+import cn from "./Export.module.css";
+
+function Export() {
+  const { cssvars } = useContext(CustomizerContext);
+
+  const [css, setCSS] = useState("");
+
+  useEffect(() => {
+    const rules = {};
+
+    Object.values(cssvars).forEach((cssvar) => {
+      const { id, current, start, scope, unit } = cssvar;
+
+      if (current == start) {
+        return;
+      }
+
+      const computedValue = `${current}${unit}`;
+      const declaration = `--bulma-${id}: ${computedValue};\n`;
+
+      if (scope in rules) {
+        rules[scope].push(declaration);
+      } else {
+        rules[scope] = [declaration];
+      }
+    });
+
+    let content = "";
+
+    for (const [key, arr] of Object.entries(rules)) {
+      content += `${key} {\n`;
+      arr.forEach((item) => (content += `  ${item}`));
+      content += `}\n\n`;
+    }
+
+    setCSS(content);
+  }, [cssvars]);
+
+  return (
+    <div className={cn.main}>
+      {css ? (
+        <>
+          <div className={cn.explanation}>
+            Insert this CSS <em>after</em> importing Bulma.
+          </div>
+
+          <Highlighter PreTag="div" language="css">
+            {css.trim()}
+          </Highlighter>
+        </>
+      ) : (
+        <div className={cn.explanation}>
+          Customize CSS variables in the other pages and come back here to find
+          the generated CSS.
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default Export;

docs/_react/bulma-customizer/src/components/Export.module.css

@@ -0,0 +1,7 @@
+.main {
+  padding: 0.5rem;
+}
+
+.explanation {
+  padding: 0 1rem 0.5rem;
+}

docs/_react/bulma-customizer/src/components/Highlighter.jsx

@@ -0,0 +1,15 @@
+import PropTypes from "prop-types";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { atomOneDark } from "react-syntax-highlighter/dist/esm/styles/hljs";
+
+const Highlighter = ({ ...rest }) => {
+  return (
+    <SyntaxHighlighter style={atomOneDark} useInlineStyles={false} {...rest} />
+  );
+};
+
+Highlighter.propTypes = {
+  code: PropTypes.string,
+};
+
+export default Highlighter;