Add Components

docs/_react/bulma-customizer/src/pages/components/Breadcrumb.jsx

@@ -0,0 +1,18 @@
+import VarItem from "components/VarItem";
+import { CSSVAR_KEYS } from "root/constants";
+
+import cn from "root/App.module.css";
+
+function Breadcrumb() {
+  const ids = CSSVAR_KEYS.breadcrumb.map((i) => i.id);
+
+  return (
+    <div className={cn.items}>
+      {ids.map((id) => {
+        return <VarItem key={id} id={id} />;
+      })}
+    </div>
+  );
+}
+
+export default Breadcrumb;

docs/_react/bulma-customizer/src/pages/components/Card.jsx

@@ -0,0 +1,18 @@
+import VarItem from "components/VarItem";
+import { CSSVAR_KEYS } from "root/constants";
+
+import cn from "root/App.module.css";
+
+function Card() {
+  const ids = CSSVAR_KEYS.card.map((i) => i.id);
+
+  return (
+    <div className={cn.items}>
+      {ids.map((id) => {
+        return <VarItem key={id} id={id} />;
+      })}
+    </div>
+  );
+}
+
+export default Card;

docs/_react/bulma-customizer/src/pages/components/Dropdown.jsx

@@ -0,0 +1,18 @@
+import VarItem from "components/VarItem";
+import { CSSVAR_KEYS } from "root/constants";
+
+import cn from "root/App.module.css";
+
+function Dropdown() {
+  const ids = CSSVAR_KEYS.dropdown.map((i) => i.id);
+
+  return (
+    <div className={cn.items}>
+      {ids.map((id) => {
+        return <VarItem key={id} id={id} />;
+      })}
+    </div>
+  );
+}
+
+export default Dropdown;

docs/_react/bulma-customizer/src/pages/components/Menu.jsx

@@ -0,0 +1,18 @@
+import VarItem from "components/VarItem";
+import { CSSVAR_KEYS } from "root/constants";
+
+import cn from "root/App.module.css";
+
+function Menu() {
+  const ids = CSSVAR_KEYS.menu.map((i) => i.id);
+
+  return (
+    <div className={cn.items}>
+      {ids.map((id) => {
+        return <VarItem key={id} id={id} />;
+      })}
+    </div>
+  );
+}
+
+export default Menu;

docs/_react/bulma-customizer/src/pages/components/Message.jsx

@@ -0,0 +1,18 @@
+import VarItem from "components/VarItem";
+import { CSSVAR_KEYS } from "root/constants";
+
+import cn from "root/App.module.css";
+
+function Message() {
+  const ids = CSSVAR_KEYS.message.map((i) => i.id);
+
+  return (
+    <div className={cn.items}>
+      {ids.map((id) => {
+        return <VarItem key={id} id={id} />;
+      })}
+    </div>
+  );
+}
+
+export default Message;

docs/_react/bulma-customizer/src/pages/components/Modal.jsx

@@ -0,0 +1,18 @@
+import VarItem from "components/VarItem";
+import { CSSVAR_KEYS } from "root/constants";
+
+import cn from "root/App.module.css";
+
+function Modal() {
+  const ids = CSSVAR_KEYS.modal.map((i) => i.id);
+
+  return (
+    <div className={cn.items}>
+      {ids.map((id) => {
+        return <VarItem key={id} id={id} />;
+      })}
+    </div>
+  );
+}
+
+export default Modal;

docs/_react/bulma-customizer/src/pages/components/Navbar.jsx

@@ -0,0 +1,18 @@
+import VarItem from "components/VarItem";
+import { CSSVAR_KEYS } from "root/constants";
+
+import cn from "root/App.module.css";
+
+function Navbar() {
+  const ids = CSSVAR_KEYS.navbar.map((i) => i.id);
+
+  return (
+    <div className={cn.items}>
+      {ids.map((id) => {
+        return <VarItem key={id} id={id} />;
+      })}
+    </div>
+  );
+}
+
+export default Navbar;

docs/_react/bulma-customizer/src/pages/components/Pagination.jsx

@@ -0,0 +1,18 @@
+import VarItem from "components/VarItem";
+import { CSSVAR_KEYS } from "root/constants";
+
+import cn from "root/App.module.css";
+
+function Pagination() {
+  const ids = CSSVAR_KEYS.pagination.map((i) => i.id);
+
+  return (
+    <div className={cn.items}>
+      {ids.map((id) => {
+        return <VarItem key={id} id={id} />;
+      })}
+    </div>
+  );
+}
+
+export default Pagination;

docs/_react/bulma-customizer/src/pages/components/Panel.jsx

@@ -0,0 +1,18 @@
+import VarItem from "components/VarItem";
+import { CSSVAR_KEYS } from "root/constants";
+
+import cn from "root/App.module.css";
+
+function Panel() {
+  const ids = CSSVAR_KEYS.panel.map((i) => i.id);
+
+  return (
+    <div className={cn.items}>
+      {ids.map((id) => {
+        return <VarItem key={id} id={id} />;
+      })}
+    </div>
+  );
+}
+
+export default Panel;

docs/_react/bulma-customizer/src/pages/components/Tabs.jsx

@@ -0,0 +1,18 @@
+import VarItem from "components/VarItem";
+import { CSSVAR_KEYS } from "root/constants";
+
+import cn from "root/App.module.css";
+
+function Tabs() {
+  const ids = CSSVAR_KEYS.tabs.map((i) => i.id);
+
+  return (
+    <div className={cn.items}>
+      {ids.map((id) => {
+        return <VarItem key={id} id={id} />;
+      })}
+    </div>
+  );
+}
+
+export default Tabs;