Add all Elements

docs/_react/bulma-customizer/src/pages/elements/Box.jsx

@@ -1,5 +1,5 @@
-import VarItem from "../components/VarItem";
-import { CSSVAR_KEYS } from "../constants";
+import VarItem from "components/VarItem";
+import { CSSVAR_KEYS } from "root/constants";
 
 function Box() {
   const ids = CSSVAR_KEYS.box.map((i) => i.id);

docs/_react/bulma-customizer/src/pages/elements/Content.jsx

@@ -0,0 +1,16 @@
+import VarItem from "components/VarItem";
+import { CSSVAR_KEYS } from "root/constants";
+
+function Content() {
+  const ids = CSSVAR_KEYS.content.map((i) => i.id);
+
+  return (
+    <div>
+      {ids.map((id) => {
+        return <VarItem key={id} id={id} />;
+      })}
+    </div>
+  );
+}
+
+export default Content;

docs/_react/bulma-customizer/src/pages/elements/Delete.jsx

@@ -0,0 +1,16 @@
+import VarItem from "components/VarItem";
+import { CSSVAR_KEYS } from "root/constants";
+
+function Delete() {
+  const ids = CSSVAR_KEYS.delete.map((i) => i.id);
+
+  return (
+    <div>
+      {ids.map((id) => {
+        return <VarItem key={id} id={id} />;
+      })}
+    </div>
+  );
+}
+
+export default Delete;

docs/_react/bulma-customizer/src/pages/elements/Icon.jsx

@@ -0,0 +1,16 @@
+import VarItem from "components/VarItem";
+import { CSSVAR_KEYS } from "root/constants";
+
+function Icon() {
+  const ids = CSSVAR_KEYS.icon.map((i) => i.id);
+
+  return (
+    <div>
+      {ids.map((id) => {
+        return <VarItem key={id} id={id} />;
+      })}
+    </div>
+  );
+}
+
+export default Icon;

docs/_react/bulma-customizer/src/pages/elements/Notification.jsx

@@ -0,0 +1,16 @@
+import VarItem from "components/VarItem";
+import { CSSVAR_KEYS } from "root/constants";
+
+function Notification() {
+  const ids = CSSVAR_KEYS.notification.map((i) => i.id);
+
+  return (
+    <div>
+      {ids.map((id) => {
+        return <VarItem key={id} id={id} />;
+      })}
+    </div>
+  );
+}
+
+export default Notification;

docs/_react/bulma-customizer/src/pages/elements/Progress.jsx

@@ -0,0 +1,16 @@
+import VarItem from "components/VarItem";
+import { CSSVAR_KEYS } from "root/constants";
+
+function Progress() {
+  const ids = CSSVAR_KEYS.progress.map((i) => i.id);
+
+  return (
+    <div>
+      {ids.map((id) => {
+        return <VarItem key={id} id={id} />;
+      })}
+    </div>
+  );
+}
+
+export default Progress;

docs/_react/bulma-customizer/src/pages/elements/Table.jsx

@@ -0,0 +1,16 @@
+import VarItem from "components/VarItem";
+import { CSSVAR_KEYS } from "root/constants";
+
+function Table() {
+  const ids = CSSVAR_KEYS.table.map((i) => i.id);
+
+  return (
+    <div>
+      {ids.map((id) => {
+        return <VarItem key={id} id={id} />;
+      })}
+    </div>
+  );
+}
+
+export default Table;

docs/_react/bulma-customizer/src/pages/elements/Tag.jsx

@@ -0,0 +1,16 @@
+import VarItem from "components/VarItem";
+import { CSSVAR_KEYS } from "root/constants";
+
+function Tag() {
+  const ids = CSSVAR_KEYS.tag.map((i) => i.id);
+
+  return (
+    <div>
+      {ids.map((id) => {
+        return <VarItem key={id} id={id} />;
+      })}
+    </div>
+  );
+}
+
+export default Tag;

docs/_react/bulma-customizer/src/pages/elements/Title.jsx

@@ -0,0 +1,16 @@
+import VarItem from "components/VarItem";
+import { CSSVAR_KEYS } from "root/constants";
+
+function Title() {
+  const ids = CSSVAR_KEYS.title.map((i) => i.id);
+
+  return (
+    <div>
+      {ids.map((id) => {
+        return <VarItem key={id} id={id} />;
+      })}
+    </div>
+  );
+}
+
+export default Title;